摘要：必須要準確的放置否則聲明無效。倒影設置元素的倒影準確的來說不能算是的東西，但需要知道。默認值不可繼承背景漸變漸變是在中新增加的圖片類型使用漸變可以在兩種顏色間制造出平滑的漸變效果用它代替圖片，可以加快頁面的載入時間減小帶寬占用。

? CSS3選擇器規范地址： https://www.w3.org/TR/2011/RE...
? CSS3最新選擇器規范: https://www.w3.org/TR/selectors
?

!---問題---!

1.CSS的全稱是什么？
Cascading Style Sheets

2.樣式表的組成：
CSS選擇器 + CSS聲明塊：（一個個CSS聲明：屬性名+屬性值）

3.瀏覽器讀取編譯CSS的順序？
CSS選擇器的解析順序：從右往左。這樣做是為了減少無效匹配次數，從而匹配快、性能更優。

（1）通配符選擇器：* {}

（2）元素選擇器：body {}任何一個HTML元素

（3）類選擇器：. .list {}

（4）ID選擇器：# #list {}

（5）后代選擇器：空格 .list li{}

（6）選擇器的分組：用逗號,隔開各個選擇器
h1,h2,h3{color: pink;} 此處的逗號我們稱之為結合符

基本選擇器擴展

（7）子元素選擇器：>，也可稱為直接后代選擇器,此類選擇器只能匹配到直接后代，不能匹配到深層次的后代元素。
#wrap > .inner {color: pink;}

（8）相鄰兄弟選擇器：+，它只會匹配緊跟著的兄弟元素。
#wrap #first + .inner {color: #f00;}

（9）通用兄弟選擇器：~，它會匹配所有的兄弟元素(不需要緊跟)。
#wrap #first ~ div { border: 1px solid;}

（1）存在 和 值 屬性選擇器
?[attr]：該選擇器選擇包含 attr 屬性的所有元素，不論 attr 的值為何。
?[attr=val]：該選擇器僅選擇 attr 屬性被賦值為 val 的所有元素。
?[attr~=val]：該選擇器僅選擇 attr 屬性的值（以空格間隔出多個值）中有包含 val 值的所有元素，比如位于被空格分隔的多個類（class）中的一個類。
?
?（2）子串值屬性選擇器
?[attr|=val] : 選擇attr屬性的值是val（包括val）或以val-開頭的元素。
?[attr^=val] : 選擇attr屬性的值以val開頭（包括val）的元素。
?[attr$=val] : 選擇attr屬性的值以val結尾（包括val）的元素。
?[attr*=val] : 選擇attr屬性的值中包含字符串val的元素。

（1）鏈接偽類： 注意:link，:visited，:target是作用于鏈接元素的！
?:link： 表示作為超鏈接，并指向一個未訪問的地址的所有錨 。
?:visited：表示作為超鏈接，并指向一個已訪問的地址的所有錨 。
?:target： 代表一個特殊的元素，它的id是URI的片段標識符 。

（2）動態偽類 : 注意:hover，:active基本可以作用于所有的元素！
?:hover : 表示懸浮到元素上。
?:active : 表示匹配被用戶激活的元素（點擊按住時）。
?由于a標簽的:link和:visited可以覆蓋了所有a標簽的狀態，所以當:link，:visited，:hover，:active同時出現在a標簽身上時 :link和:visited不能放在最后！！！

隱私與:visited選擇器:只有下列的屬性才能被應用到已訪問鏈接：
?color
?background-color
?border-color

（3）表單相關偽類
?:enabled： 匹配可編輯的表單
?:disable： 匹配被禁用的表單
?:checked： 匹配被選中的表單
?:focus： 匹配獲焦的表單

?
（4）結構性偽類
?index的值從1開始計數?。。?！
?index可以為變量n(只能是n)
?index可以為even、 odd
?#wrap ele:nth-child(index)：表示匹配#wrap中第index的子元素 這個子元素必須是ele
?#wrap ele:nth-of-type(index)：表示匹配#wrap中第index的ele子元素
?除此之外:nth-child和:nth-of-type有一個很重要的區別?。?b>:nth-of-type以元素為中心?。?！
?

:nth-child(index)系列

:first-child

:last-child

:nth-last-child(index)

:only-child(相對于:first-child:last-child 或者 :nth-child(1):nth-last-child(1))

:nth-of-type(index)系列

:first-of-type

:last-of-type

:nth-last-type(index)

:only-of-type (相對于:first-of-type:last-of-type 或者 :nth-of-type(1):nth-last-of-type(1))

:not

:empty(內容必須是空的，有空格都不行，有attr沒關系)

（5）偽元素

::after
::before
::firstLetter
::firstLine
::selection
?

（1）選擇器的特殊性
選擇器的特殊性由選擇器本身的組件確定，特殊性值表述為4個部分，如0,0,0,0
一個選擇器的具體特殊性如下確定：

1.對于選擇器中給定的ID屬性值，加 0,1,0,0

2.對于選擇器中給定的各個類屬性，屬性選擇，或偽類，加 0,0,1,0

3.對于選擇器中的給定的各個元素和偽元素，加0,0,0,1

4.通配符選擇器的特殊性為0,0,0,0

5.結合符對選擇器特殊性沒有一點貢獻

6.內聯聲明的特殊性都是1,0,0,0

7.繼承沒有特殊性

特殊性 1,0,0,0 大于所有以0開頭的特殊性(不進位)

選擇器的特殊性最終都會授予給其對應的聲明

如果多個規則與同一個元素匹配，而且有些聲明互相沖突時，特殊性越大的越占優勢

注意區分：id選擇器和屬性選擇器
div[id="test"]（0,0,1,1） 和 #test（0,1,0,0）

（2）重要聲明

有時某個聲明比較重要，超過了所有其他聲明，css2.1就稱之為重要聲明，并允許在這些聲明的結束分號之前插入!important 來標志。

必須要準確的放置 !important 否則聲明無效。

!important 總是要放在聲明的最后，即分號的前面。

標志為 !important的聲明并沒有特殊的特殊性值，不過要與非重要聲明分開考慮。

實際上所有的重要聲明會被瀏覽器分為一組，重要聲明的沖突會在其內部解決。

非重要聲明也會被分為一組，非重要聲明的沖突也會在其內部解決。

如果一個重要聲明與非重要聲明沖突，勝出的總是重要聲明。

（3）繼承

繼承沒有特殊性，甚至連0特殊性都沒有。

0特殊性要比無特殊性來的強。

（4）來源

CSS樣式的來源大致有三種：

創作人員

讀者

用戶代理

權重：

讀者的重要聲明

創作人員的重要聲明

創作人員的正常聲明

讀者的正常聲明

用戶代理的聲明

（5）層疊

1.找出所有相關的規則，這些規則都包含一個選擇器。

2.計算聲明的優先級

先按來源排序

再按選擇器的特殊性排序

最終按順序

@font-face：允許網頁開發者為其網頁指定在線字體。

通過這種作者自備字體的方式，可以消除對用戶電腦字體的依賴。

font-family：所指定的字體名字將會被用于font或font-family屬性。

src：字體資源。

注意:不能在一個 CSS 選擇器中定義@font-face。

（1）opacity

opacity屬性指定了一個元素的透明度。

默認值：1.0 ，不可繼承。

（2）新增顏色樣式rgba

（3）文字陰影(text-shadow)

text-shadow用來為文字添加陰影，而且可以添加多層，陰影值之間用逗號隔開。（多個陰影時，第一個陰影在最上邊）

默認值：none ，不可繼承 。

（4）文字描邊(-webkit-text-stroke)

只有webkit內核才支持：-webkit-text-stroke（準確的來說不能算是CSS3的東西，但需要知道）。

（5）文字排版

direction:控制文字的方向，一定要配合unicode-bidi:bidi-override;來使用。

text-overflow :確定如何向用戶發出未顯示的溢出內容信號。

它可以被剪切，

顯示一個省略號（"..."）

（1）盒模型陰影box-shadow

box-shadow
以逗號分割列表來描述一個或多個陰影效果，可以用到幾乎任何元素上。 如果元素同時設置了 border-radius ，陰影也會有圓角效果。多個陰影時和多個 text-shadows 規則相同(第一個陰影在最上面)。

默認值: none ， 不可繼承。

（2）倒影-webkit-box-reflect

-webkit-box-reflect 設置元素的倒影（準確的來說不能算是CSS3的東西，但需要知道）。

默認值:none，不可繼承。

（3）resize

resize CSS 屬性允許你控制一個元素的可調整大小性。
（一定要配合overflow：auto使用）

默認值：none， 不可繼承。

（4）box-sizing

box-sizing 屬性用于更改用于計算元素寬度和高度的默認的 CSS 盒子模型?？梢允褂么藢傩詠砟M不正確支持CSS盒子模型規范的瀏覽器的行/列為。

默認值：content-box， 不可繼承。

（1）圓角border-radius

border-radius

默認值：0， 不可繼承。

（2）邊框圖片border-image

border-image： CSS屬性允許在元素的邊框上繪制圖像。這使得繪制復雜的外觀組件更加簡單，使用 border-image 時，其將會替換掉 border-style 屬性所設置的邊框樣式。

默認值： 不可繼承

border-image-source: none

border-image-slice: 100%

border-image-width: 1

border-image-outset: none

border-image-repeat: stretc

（3）背景background

（4）漸變

CSS 漸變 是在 CSS3 Image Module 中新增加的圖片類型；使用 CSS漸變可以在兩種顏色間制造出平滑的漸變效果. 用它代替圖片，可以加快頁面的載入時間、減小帶寬占用。同時，因為漸變是由瀏覽器直接生成的，它在頁面縮放時的效果比圖片更好，因此你可以更加靈活、便捷的調整頁面布局。

瀏覽器支持兩種類型的漸變：

線性漸變 (linear)，通過 linear-gradient 函數定義

徑向漸變 (radial)，通過 radial-gradient 函數定義.

CSS3 彈性盒子(Flexible Box 或 Flexbox)，是一種用于在頁面上布置元素的布局模式，使得當頁面布局必須適應不同的屏幕尺寸和不同的顯示設備時，元素可預測地運行/列。對于許多應用程序，彈性盒子模型提供了對塊模型的改進，因為它不使用浮動，flex容器的邊緣也不會與其內容的邊緣折疊。

彈性盒模型，分老版與新版：

老版本的我們通常稱之為`box `  
新版本的我們通常稱之為`flex`

主軸 與 側軸

由`flex-direction`/`-webkit-box-orient`確定

有了新版本后，為什么還需要老版本？（新版本比老版本要強大的很多）

很多移動端瀏覽器內核版本都超低。  

（1）老版
容器設置display為webkit-box
（注意:項目永遠是在主軸上排列的）

-webkit-box-orient屬性本質上確定了主軸是哪一根

horizontal:x軸

vertical:y軸

（注意:項目永遠是沿著主軸的正方向排列的）

-webkit-box-direction屬性本質上改變了主軸的方向

-webkit-box-direction: normal;

-webkit-box-direction: reverse;

富?？臻g的管理（主軸）

start

end

center

justify

-webkit-box-pack:start;
不會給項目區分配空間，只是確定富?？臻g的位置

富?？臻g的管理（側軸）

start

end

center

-webkit-box-align:center;
不會給項目區分配空間，只是確定富裕空間的位置

彈性空間的管理：將富?？臻g按比例分配到各個項目上

-webkit-box-flex: 1;

默認值:0 ， 不可繼承

（2）新版

容器的布局方向

flex-direction: row;

flex-direction: column;

容器的排列方向

flex-direction:row-reverse;

flex-direction:column-reverse;

更強大的富?？臻g的管理（主軸）

justify-content: flex-start;

flex-start

flex-end

center

space-between

space-around(box 沒有的)

更強大的富?？臻g的管理（側軸）

align-items: stretch;

flex-start

flex-end

center

baseline(box 沒有的)

stretch(box 沒有的)

彈性空間的管理

flex-grow: 1

https://developer.mozilla.org...

CSS3媒體查詢是響應式方案核心。

（1）媒體類型

all： 所有媒體

braille： 盲文觸覺設備

embossed： 盲文打印機

print： 手持設備

projection： 打印預覽

screen： 彩色屏幕

speech： “聽覺”類似的媒體設備

tty： 不適用像素的設備

tv： 電視

（2）媒體特性（媒體屬性）

width （可加max min前綴）

height （可加max min前綴）

min-width：分辨率寬度大于設置值的時候識別

max-width：分辨率寬度小于設置值的時候識別

device-width （可加max min前綴）

device-pixel-ratio：像素比（可加max min前綴，需要加webkit前綴）

orientation：portrait ：豎屏

orientation：landscape：橫屏

（3）操作符、關鍵字

and： 連接媒體特性

連接媒體屬性 、連接媒體類型

對于所有的連接選項都要匹配成功才能應用規則

or : 和and相似

對于所有的連接選項只要匹配成功一個就能應用規則

not： 排除指定媒體類型

only： 指定某種特定的媒體類型

防止老舊的瀏覽器 不支持帶媒體屬性的查詢而應用到給定的樣式。

@media only screen and (min-width:800px ){
        規則；
        規則
}

@media  screen and (min-width:800px ){

        規則；
        規則
}

在老款的瀏覽器下

@media only ---> 因為沒有only這種設備，規則被忽略。

@media screen ---> 因為有screen這種設備而且老瀏覽器會忽略帶媒體屬性的查詢。

建議在每次書寫media query的時候帶上only。

（1）欄目寬度

column-width指定每一欄的寬度（這是多列布局的第一種分法）

（2）欄目列數

column-count指定要多少欄（這是多列布局的第二種分法）

（3）欄目距離

column-gap

（4）欄目間隔線

column-rule