CSS3經常使用新特性

CSS3的新特性

1. 新增CSS3特性有兼容性問題，ie9+才支持

2. 移動端支持優於PC端

3. 新增選擇器和盒子模型以及其餘特性

4. CSS新增選擇器

   • 屬性選擇器

     • 屬性選擇器能夠根據元素特定屬性來選擇元素，這樣就能夠不用藉助於類或者id選擇器

       選擇符	簡介
       E[att]	選擇具備att屬性的E元素
       E[att="val"]	選擇具備att屬性切屬性值等於val的E元素
       E[att^="val"]	匹配具備att屬性且值以val開頭的E元素
       E[att$="val"]	匹配具備att屬性且值以val結尾的E元素
       E[att*="val"]	匹配具備att屬性且值中含有val的E元素

     • 【注意】類選擇器、屬性選擇器、僞類選擇器，權重爲10

   • 結構僞類選擇器

     選擇符	簡介
     E:first-child	匹配父元素中元素的第一個子元素E
     E:last-child	匹配父元素中最後一個E元素
     E：nth-child（n）	匹配父元素中的第n個子元素E
     E:first-of-type	指定類型E的第一個
     E:last-of-type	指定類型E的最後一個
     E：nth-of-type（n）	指定類型E的第n個

     • nth-child（n）選擇某個父元素的一個或多個特定的子元素

       • n能夠是數字，關鍵字和公式

       • n若是是數字，就是選擇第n個子元素，裏面數字從1開始

       • n能夠是關鍵字：even偶數，odd奇數

       • n能夠是公式：常見的公式以下（若是n是公式，則從0開始計算，可是第0個元素或者超出元素的個數會被忽略）

         公式	取值
         2n	偶數
         2n+1	奇數
         5n	5 10 15 .
         n+5	從第5個開始（包含第五個）到最後
         -n+5	前5個（包含第5ge）

       • 選擇符	簡介
         E:first-child	匹配父元素中的第一個子元素E
         E:last-child	匹配父元素中最後一個E元素
         E:nth-child（n）	匹配父元素中的第N個子元素
         E:first-of-type	指定類型E的第一個
         E:last-of-type	指定類型E的最後一個
         E:nth-of-type（n）	指定類型E的第n個

         【區別】nth-child對父元素裏面全部孩子排序選擇（序號是固定的）先找第n個孩子，而後看看是否和E匹配；nth-of-type：對父元素裏面指定子元素進行排序選擇。先去匹配E，而後再根據E找第n個孩子

   • 僞元素選擇器

     • 僞元素選擇器能夠幫咱們利用CSS建立新標籤元素，而不須要HTML標籤，從而簡化HTML結構

       選擇符	簡介
       ：：before	在元素內部插入內容
       ：：after	在元素內部的後面插入內容

     • 【注意】

       • befor和after建立一個元素，可是屬於行內元素
       • 新建立的這個元素在文檔樹中是找不到的，因此咱們成爲僞元素
       • 語法：element：：befor{}
       • before和after必須有content屬性
       • before在父元素內容的前面建立元素，after在父元素內容的後面插入元素
       • 僞元素選擇器和標籤選擇器同樣，權重爲1

5. CSS3盒子模型

   • CSS3中能夠經過box-sizing來制定盒模型，有2個值；便可指定爲content-box、border-box，這樣咱們計算盒子大小的方式就發生了改變

6. css3圖片變模糊

   • CSS3濾鏡filter：

     • filter CSS屬性將模糊或顏色偏移等圖片效果應用於元素

     • filter：函數（）； 例如：filter：blur（5px）； blur模糊處理  數值越大越模糊

7. 計算盒子寬度width：calc函數

   • width：calc（100%-80px）；

   • 括號裏面可使用+ - * /來進行計算

8. CSS3過渡

   • 過渡transition是CSS3中具備顛覆性的特徵之一，咱們能夠在不使用Flash動畫或者JS的狀況下，當元素從一種樣式變換爲〇一種樣式時爲元素添加效果

   • 過渡動畫：是從一個狀態漸漸的過渡到另外一種狀態

   • 常常和：hover一塊兒搭配使用

   • transition：要過渡的屬性 花費的時間 運動曲線  什麼時候開始；

     值	說明
     屬性	想要變化的CSS屬性，寬度 高度 背景顏色 內外邊距均可以。若是想要全部的屬性都有變化過渡，寫一個all就能夠了
     花費的時間	單位是 秒（必須寫單位）好比0.5s
     運動曲線	默認時ease（能夠省略）
     什麼時候開始	單位時 秒 （必須寫單位）能夠設置延遲出發時間 默認時0s（能夠省略）