H5新增的离线应用：
（1）当要开发基于h5的离线应用时，先确定服务器是否支持对manifest文件的解析。
（2）若不支持，需要用户手动设置，在服务器mime.types文件中添加；
（3）为什么要求服务器一定要支持manifest文件？
答：因为离线存储必须要有一个manifest文件来存储需要缓存在用户机器上的资源路径，且这个路径将在html的文件中使用。
manifest：该清单文件列出了浏览器为离线应用缓存的所有资源。
manifest的MIME类型是text/cache-manifest；
注意：不同的web服务器有其独特的配置方法：
例如：Apache服务器中：
在Apache Software Foundation\Apache 2.2\conf中的mime.types文件中加入：
text/cache-manifest manifest
H5新增Geolocation地理定位
（1）检查浏览器支持情况
if(navigator.geolocation){
//该浏览器支持地理定位
}
该API中由一个获取当前位置的函数方法getCurrentPosition
navigator.geolocaiton.getCurrentPosition(onSuccess,onError);
onSuccess----->funciton(position){}
该函数中有一个postion对象
onError：使用error对象，该对象有两个属性
属性一：
code：1--->用户拒绝了位置服务；
2--->获取不到位置信息；
3--->获取信息超时错误；
message：FireFox浏览器不支持
字符串，给字符串包含错误信息。在开发和调试的时候很有用。
css3新增属性：
（1）多列布局
column-count：3；//将页面分为3列
column-gap：1.5em；//列与列之间的间距。
column-rule：solid 1px #F00;//列边框的样式
columns：250px 3；//列宽250px，定位3列；
column-fill：auto/balance;定义列高
auto：各列高随内容变化而自动变化；
balance：各列高会根据内容最多的那一列的高进行统一；
column-width：300px；
（2）背景的写法
background:url(images/a.jpg) top left no-repeat;
（3）word-wrap：normal；//在允许的断点截断文字，如连字符；
break-word；//以单词截断；
break-all；
（4）阴影处理
text-shadow：2px 2px 20px #06c;//增加文字的阴影
第一个参数：+--->向右投；- --->向左投
第二个参数：+--->向下投；- --->向上投
第三个参数：模糊度半径；
box-shadow:2px 2px 10px #06C;//给图片或块级元素加投影。
（5）圆角投递：
-webkit-border-top-right-radius:20px;
border-radius:__ __ __ __;
（6）边框图片：
border-image：none；//无背景图
border-image:url("images.jpg");
（7）选择器
I、属性选择器
E[foo="bar"] 如：p[class="bar"]
E[foo^="bar"],E[foo$="bar"],E[foo*="bar]
II、伪类选择器
1、 E：nth-child（n）；//选择所在其父元素中第n个位置的匹配的子元素；《1，2， 3，odd，even，2n+3，2n》
2、 E：nth-last-child(n)；//选择所在其父元素中倒数第n个位置的匹配子元素。
3、E：nth-of-type(n)；
例子：p:nth-of-type(2);
<div><h1></h1><p></p><p></p></div>
第二个p元素匹配
4、E：nth-last-of-type(n)；类似3中的，但是从后往前数
E：nth-last-of-type（最长数）--->E:last-of-type;
5、E：last-child；
例子：h1：last-child；
<div><p></p><h1></h1></div>
6、E：only-child；//其父元素只含有一个p元素；
<div><p></p></div>:匹配
<div><h1></h1><p></p></div>:不匹配
7、E：only-of-type；//选择其父元素只包含一个同类型的子元素，且该子元素匹配E；
例子：p：only-of-type；
<div><p></p></div>----》匹配
<div><h1></h1><p></p></div>-----》不匹配
（8）盒模式
display：box；
box-flex：1；//定义了此属性，则盒子布局变为弹性盒子布局；2的是1的2倍；
box-orient:vertical/horizontal；//垂直布局，水平布局。
box-ordinal-group:number;//定义元素显示的顺序；
8、css3新增的UI伪类
常用的
I、
E：enabled；//匹配E的所有可用UI元素；
例子：
input：enabled；
<form><input type="text"/><input type="button" disabled="disabled"/></form>
阴影部分为匹配；
II、
E：disabled；//匹配不可用的，即匹配上个例子中的按钮部分；
III、
E：checked；
<form><input type="checkbox"/><input type="radio" checked="checked"/></form>
9、
a、
E~F：选择匹配F的所有元素，且匹配元素位于匹配元素E的后面。
div~p：
<div><p>1</p></div><div><p>2</p></div><p>3</p>
b、
E：nots（s）；//选择匹配E的所有元素，且过滤匹配s选择符的所有元素；
div p:not(.red);
<div><p class="red">1</p></div><div><p>2</p></div><p>3</p>
c、
E：target；目标伪类选择器
选择匹配E的所有元素，且匹配元素被相关url指向。
例子：
<div id="red">盒子1</div>
<div id="blue">盒子2</div>
div:target{background:red;}
若：localhost/index.html#red;则指向第一个盒子；
10、颜色处理
rgba(r,g,b,opacity);//r,g,b都是0~255，opacity是0~1；
hsl（色调，饱和度，亮度）；
色调：-360~360，其中0，360，-360是红色，60为黄色，120为绿色，180为青色，240为黄色；
饱和度：0~100%；0为灰色，100%是艳色；
亮度：0~100%；
hsla：最后一个指的是透明度
另一个指定透明度的方法：
opacity：0.7；filter：alpha（opacity=70）；
若将颜色值设为transparent；
如：background-color：transparent；border-color：transparent；color：transparent；
这些都相当于使用alpha=0；可以将背景，文字，边框等设为完全透明度。
11、边框处理
a、border-top-color/border-bottom-color/border-left-color/border-right-color
若color为colors则可以指定多种颜色；
b、border-top-image 。。。。。。
border-top-left-image 。。。。。。
c、border-image：url（） 27；
27可以表示为border-image-slice：27 27 27 27；//上右下左顺时针剪裁
d、border-image-repeat:
属性值：stretch（拉伸），repeat（重复），round（平铺）
f、border-radius；
border-top-right-radius。。。。。。
-moz-border-radius-bottomleft:
-webkit-border-bottom-left-radius:
12、css新增属性
nav-index:为了使浏览器顺序获得焦点-->代替了tabindex；数字越大越先导航
nav-up:#元素（up，right，left，bottom）：用方向键控制焦点的位置；
content:normal|string|attr()|url()|counter()|none
string:插入文本内容； attr（）：插入元素的属性值；
url（）：插入一个外部资源； counter（）：计数器，用于插入排序标记
例子：p：after{content：“支持”}
13、恢复默认样式的方法
1）删除元素的默认代码：但是这种方法不要用，因为写一个样式页面中的多个元素使用该样式。
2）将该元素的class属性去掉，但是这种方法会被取代，因为class是一个无意义的属性；
3）css3中方法，使用initial，可以直接取消该元素的样式，恢复为默认样式
例子：color:initial;color:-moz-initial;
14、2D动画
针对旋转动画，IE浏览器虽然不支持，但是可以考虑使用图形旋转滤镜进行兼容；
filter:progid:DXImageTransform.Microsoft.BasicImage(enabled=bEnabled,grayScale=bGray,mirro=bMirror,opacity=fOpacity,XRay=bXRay)
enabled：boolean，设置或检索滤镜是否激活；
grayScale：boolean，设置或检索是否以灰度显示对象内容，1表示以灰度效果显示对象内容，0表示正常显示对象内容。
mirror：boolean，设置或检索是否反转显示对象内容。1表示反转显示
opacity：浮点数，设置对象内容的透明度，
XRay：boolean，设置或检索是否以X光效果显示对象内容，1表示以X光效果显示对象内容。
-webkit-transform:rotate(-90deg);//旋转
-webkit-transform:scale(2);//放大2倍
-webkit-transform:translate(4px,4px)//移动动画
第一个参数代表水平移动（右），第二个参数代表垂直移动（下）
-moz-transform：skew（30deg，-10deg）；//倾斜动画
第一个参数为：相对x轴倾斜；第二个参数为：相对与y轴倾斜；
-webkit-transform：matrix（1，0，4，0，1，0，0）；//变形
相当于： a b c
d f g
0 0 1
综合写：
-moz-transform:translate(80,80) rotate(45deg) scale(1.5,1.5)
自定义变形：将默认原点设置为左上角或左下角等
transform-origin:a,b;为百分比，或em，px 或者为left/center/right/top/middle/bottom
但是ie不支持自定义变形
注意：-webkit-transition:该属性是个复合属性，相应的属性如下面
-webkit-transition:background-color 1s linear,color 1s linear,width 1s linear;
1s内完成背影颜色变为css属性中定一定 颜色。。。。。。
属性1：transition-property:该属性适用所有元素以及：before和：after伪元素
none：没有元素，all所有元素；
indent：css属性列表如transition-property：background-color；
属性2：transition-duration：2s；//过滤动画延时
属性3：transiton-timing-function：定义过滤动画效果
ease：缓解效果；linear：线性效果；ease-in：渐显；ease-out：渐隐；
ease-in-out：渐显渐隐 cubic-bezier：特殊立方贝赛尔曲线效果；
3D动画
animation-name：定义css3动画的名字，若为none，则不会有动画
animation-duration：动画的播放时间
animation-timing-funciton：动画播放方式
ease：缓解效果；linear：线性效果；ease-in：渐显；ease-out：渐隐；
ease-in-out：渐显渐隐 cubic-bezier：特殊立方贝赛尔曲线效果；
animation-delay：动画延迟播放时间
animation-iteration-count：动画的播放次数
默认值为1，infinite：无限次播放
animation-direction:
normal：默认值，动画每次循环向前播放；
alternate：第偶数次向前播放，第奇数次向反方向播放。
小知识点：
1、box-sizing：content-box/border-box;//定义和模式的解析方式
content-box:width/height=border+padding+content;
border-box:widht/height=content;
2、resize：css3新增的，调节元素的尺寸，手动
none:浏览器不提供尺寸调节机制，用户不能操作机制调节元素尺寸；
both：浏览器提供双向调节机制，用户可以调节高度和宽度
horizontal：单向水平尺寸调节，即调节宽度；
vertical：垂直调节，即调节高度；
inherit：默认继承；
3、外轮廓：与边框不同，不占页面布局空间，它属于动态样式，只有当前对象获取焦点或激活时呈现。
outline:[outline-color]|[outline-style]|[outline-widht]|[outline-offset]|inherit
outline-color：各种颜色，或者invert（逆向颜色）
outline-style：auto或者none，dotted,dashed,solid,double,groove,ridge,inset,outset;
outline-width:<length数值>或者thin,medium,thick
outline-offset:数值；//定义轮廓边框偏移位置的数值。