孔子曰：學而不思則罔，思而不學則殆。
廢話不多說，直接上。
淺談相容
css相較於js html來說，相容性問題最不是事，CSS在最初設計時，就有一個協議：如果不能識別選擇器屬性，那麼就預設不處理，不報錯。這個也是CSS得以發展的非常重要的特徵。
下面是各個瀏覽器私有字首：
IE -ms-
Chrome -webkit-
Firefox -moz-
Safari -webkit-
Opera -o-
CSS3中的兩種相容性策略：
漸進增強：先寫瀏覽器都支援的屬性，以保證低版本的瀏覽器的基本功能，然後再新增新瀏覽器中新增的屬性。（向上相容）
優雅降級：首先針對高版本瀏覽器寫CSS，然後向低版本瀏覽器做相容。（向下相容）
CSS3選擇器
選擇器，也叫選擇符，就是用來選擇DOM元素的符號。
CSS2.1選擇器
複習一下之前學習的七種選擇器：
|
選擇器 |
說明 |
|
* |
萬用字元選擇器 |
|
p |
標籤選擇器 |
|
.box |
類選擇器 |
|
#box |
ID選擇器 |
|
div span |
後代選擇器 |
|
div, p |
分組選擇器 |
|
div.box |
交集選擇器 |
|
:hover |
滑鼠懸停時 |
CSS3屬性選擇器
按照元素的屬性進行選擇。img標籤裡面alt屬性， input裡面的type屬性......
|
選擇器 |
說明 |
|
input[title] |
選擇具有title的input元素 |
|
input[title=”bz”] |
選擇具有title屬性，具屬性值為”bz” |
|
input[title *= “bz”] |
選擇具有title屬性，且屬性值中包含有”bz” |
|
input[title ^= “bz”] |
選擇具有title屬性，且屬性值中以”bz”開頭 |
|
input[title $= “bz”] |
選擇具有title屬性，且屬性值中以”bz”結束 |
|
input[title ~= “bz”] |
選擇具有title屬性，且屬性值中”bz”是以空格分隔的獨立部分 |
|
input[title |= “bz”] |
選擇具有title屬性，且屬性值中以”bz-”開頭 |
注意點：屬性選擇器，是從IE7才開始支援的。
CSS3 關係選擇器
|
選擇器 |
說明 |
|
section div |
選擇section後面所有的div，是所有後代 |
|
section>div |
選擇seciton後面兒子，不是所有後代 |
|
div+span |
選擇div後面緊挨著的第一個span |
|
div~span |
選擇div後面所有的span |
CSS3 偽類選擇器
|
選擇器 |
說明 |
|
:root |
根元素選擇器 |
|
:nth-child(n) |
選中第n個孩子 |
|
:first-child |
選中第一個孩紙 |
|
:last-child |
選中最後一個孩紙 |
|
:nth-last-child(n) |
選中倒數第n個孩子 |
|
:only-child |
獨生子女 |
|
:nth-child(2n) :nth-child(even) |
選中排行偶數的孩紙 |
|
:nth-child(2n+1) :nth-child(odd) |
選中排行奇數的孩紙 |
|
:nth-child(-n+5) |
選中排行前5的孩紙 |
|
:nth-of-type(n) |
選擇其父母下的排行第n的同類孩子 |
|
:first-of-type |
選擇同類中的第一個孩子 |
|
:last-of-type |
選擇同類中的最後一個孩子 |
|
:nth-of-type(2n) :nth-of-type(even) |
選擇同類中排行偶數的孩子 |
|
:nth-of-type(2n+1) :nth-of-type(odd) |
選擇同類中排行奇數的孩子 |
|
:nth-of-type(-n+2) |
選擇同類中排行同兩個的孩子 |
|
:only-of-type |
選擇同類中唯一一個的孩子 |
|
:nth-last-of-type(n) |
選擇同類中倒數第n個孩子 |
|
:hover |
任意元素都可以使用，滑鼠在元素上盤旋時 |
|
:active |
任意元素都可以使用，元素處於啟用時 |
|
:focus |
當表單處於焦點時 |
|
:checked |
當表單元素處於選中狀態時 |
|
:disabled |
當表單元素處處於不可用時 |
|
:enabled |
當表單元素處於可用時 |
|
:lang() |
表單元素處於某種語言時 |
|
:empty |
選擇空元素 |
|
:not(selector) |
取非 |
|
:target |
當錨點處於當前狀態時 |
:nth-child 和 :nth-of-type 的區別：
參考張鑫旭：www.zhangxinxu.com/wordpress/2…
CSS3 偽元素選擇器
|
選擇器 |
說明 |
|
:before |
在當前元素的內部最前面插入一個偽元素 |
|
:after |
在當前元素的內部最後面插入一個偽元素 |
|
:first-letter |
選中元素的第一個字元 |
|
:first-line |
選中元素的第一行 |
|
::selection |
選中的元素 |
注意：:before裡面有一個content屬性，這個屬性必須要寫，如果沒有內容，就寫空串。
::selection選擇器注意點:必須保證容器沒有被接受一個屬性，叫user-select: none;如果接受了這個屬性，那麼該元素的文字不可選，樣式永遠不可能生效。
CSS3新屬性
顏色表示法
在CSS3中，又新增了幾種顏色表示法：
|
顏色表示法 |
說明 |
|
RGBA |
A是透明度（0~1） |
|
HSL |
說明如下 |
|
HSLA |
說明如下 |
H：Hue(色調)。0(或360)表示紅色，120表示綠色，240表示藍色，也可取其他數值來指定顏色。取值為：0 - 360
S： Saturation(飽和度)。取值為：0.0% - 100.0%
L： Lightness(亮度)。取值為：0.0% - 100.0%
圓角屬性
|
屬性 |
說明 |
|
border-radius |
|
|
border-top-left-radius |
左上角 |
|
border-top-right-radius |
右上角 |
|
border-bottom-left-radius |
左下角 |
|
border-bottom-right-radius |
右下角 |
陰影屬性
格式：box-shadow: 右 下 羽化值 延展 顏色 inset
注意細節
1，前兩個引數為0時，可以去模擬發光效果。
2，如果需要設定內陰影，那麼需要給box-shadow新增上inset值就可以。
3，可以給盒子設定多個陰影，只需要在多個陰影之間以逗號分隔就可以。
4，從IE9開始支援盒子陰影。
格式：text-shadow: 右 下 羽化值 顏色
注意細節：
1，文字陰影沒有延展，沒有inset， 其它和盒子陰影一樣
2，它是從IE10開始支援
背景起點
背景起點就是研究背景是相對於誰進行定位的。預設的，它是相對於盒子的padding進行定位的。
background-origin:padding-box | border-box | content-box
background-origin的預設值是padding-box
背景裁切
background-clip: border-box | padding-box | content-box
|
背景裁切屬性 |
說明 |
|
border-box |
表示背景圖片是按照邊框盒進行裁切 |
|
padding-box |
表示背景圖片是按照內邊距框進行裁切 |
|
content-box |
表示背景圖片是按照內容框進行裁切 |
背景大小
|
背景圖大小取值 |
說明 |
|
background-size:auto auto |
預設情況 |
|
background-size:100px 100px |
背景圖片被設定成100px * 100px |
|
background-size:100% 100% |
背景圖的寬高與盒子等寬高 |
|
background-size:100% auto |
寬度與盒子等寬，高度自動等比縮放 |
|
background-size: auto 100% |
高度與盒子等高，寬度自動等比縮放 |
|
background-size: cover |
縮放背景圖到剛好覆蓋盒子為止 |
|
background-size: contain |
在保證背景圖完整顯示的情況下，儘可能的縮放背景圖到等高或等寬 |
背景漸變
背景漸變是指背景圖，而不是指背景色，用到的屬性是background-image, 不是background-color。
liear-gradient(開始的位置，顏色值1， 顏色值2.....)
有兩種座標系（W3C和WHATWG）
w3c：
background-image: linear-gradient(90deg,red,black)複製程式碼whatwg：
background-image: -webkit-linear-gradient(0deg,red,black)
複製程式碼效果才是一樣的。
背景圖與插入圖片區別
1，插入的圖片可以拖拽，背景圖片不能拖拽
2，插入圖片佔位，背景圖片不佔位
3，插入圖片語義較高，可以被搜尋引擎收錄到，背景圖片語義低，不能被搜尋引擎收錄到
4，背景圖片非常容易控制，相關的屬性比較多......
5，插入的圖片有一個bug， 圖片下方預設會出一個白邊， 這個白邊是一個bug， 大約有10px
過渡動畫
transition: 要發生變化的屬性名 動畫時長 緩衝曲線 等待時間
transition-property: 要發生變化的屬性名
transition-duration: 動畫時長
transition-timing-funciton: 緩衝曲線
transition-delay：等待時間
變型
2D 轉換
translate()方法：
通過 translate() 方法，元素從其當前位置移動，根據給定的 left（x 座標） 和 top（y 座標） 位置引數。
值 translate(50px,100px) 把元素從左側移動 50 畫素，從頂端移動 100 畫素。
rotate（）方法
通過 rotate() 方法，元素順時針旋轉給定的角度。允許負值，元素將逆時針旋轉。
值 rotate(30deg) 把元素順時針旋轉 30 度。
scale() 方法
通過 scale() 方法，元素的尺寸會增加或減少，根據給定的寬度（X 軸）和高度（Y 軸）引數
值 scale(2,4) 把寬度轉換為原始尺寸的 2 倍，把高度轉換為原始高度的 4 倍。
skew() 方法
transform:skew(y軸向x軸靠攏的度數，x軸向y軸靠攏的度數)
3D 轉換
rotateX() 方法
通過 rotateX() 方法，元素圍繞其 X 軸以給定的度數進行旋轉。
注意：如果度數為正值，那麼是後仰，如果是負值，是前頃。
rotateY() 旋轉
通過 rotateY() 方法，元素圍繞其 Y 軸以給定的度數進行旋轉。
注意：如果度數為正值，那麼是往X軸正方向旋轉，如果是負值，是往X軸負方向旋轉。
這些屬性，大家知道就行，用到時，再翻看。會不定期新增哦！