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:數值；//定義輪廓邊框偏移位置的數值。