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

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

!---問題---!

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

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

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

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

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

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

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

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

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

基本選擇器擴(kuò)展

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

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

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

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

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

（2）動(dòng)態(tài)偽類 : 注意:hover，:active基本可以作用于所有的元素！
?:hover : 表示懸浮到元素上。
?:active : 表示匹配被用戶激活的元素（點(diǎn)擊按住時(shí)）。
?由于a標(biāo)簽的:link和:visited可以覆蓋了所有a標(biāo)簽的狀態(tài)，所以當(dāng):link，:visited，:hover，:active同時(shí)出現(xiàn)在a標(biāo)簽身上時(shí) :link和:visited不能放在最后?。?！

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

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

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

:nth-child(index)系列

:first-child

:last-child

:nth-last-child(index)

:only-child(相對(duì)于: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 (相對(duì)于:first-of-type:last-of-type 或者 :nth-of-type(1):nth-last-of-type(1))

:not

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

（5）偽元素

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

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

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

2.對(duì)于選擇器中給定的各個(gè)類屬性，屬性選擇，或偽類，加 0,0,1,0

3.對(duì)于選擇器中的給定的各個(gè)元素和偽元素，加0,0,0,1

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

5.結(jié)合符對(duì)選擇器特殊性沒有一點(diǎn)貢獻(xiàn)

6.內(nèi)聯(lián)聲明的特殊性都是1,0,0,0

7.繼承沒有特殊性

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

選擇器的特殊性最終都會(huì)授予給其對(duì)應(yīng)的聲明

如果多個(gè)規(guī)則與同一個(gè)元素匹配，而且有些聲明互相沖突時(shí)，特殊性越大的越占優(yōu)勢

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

（2）重要聲明

有時(shí)某個(gè)聲明比較重要，超過了所有其他聲明，css2.1就稱之為重要聲明，并允許在這些聲明的結(jié)束分號(hào)之前插入!important 來標(biāo)志。

必須要準(zhǔn)確的放置 !important 否則聲明無效。

!important 總是要放在聲明的最后，即分號(hào)的前面。

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

實(shí)際上所有的重要聲明會(huì)被瀏覽器分為一組，重要聲明的沖突會(huì)在其內(nèi)部解決。

非重要聲明也會(huì)被分為一組，非重要聲明的沖突也會(huì)在其內(nèi)部解決。

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

（3）繼承

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

0特殊性要比無特殊性來的強(qiáng)。

（4）來源

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

創(chuàng)作人員

讀者

用戶代理

權(quán)重：

讀者的重要聲明

創(chuàng)作人員的重要聲明

創(chuàng)作人員的正常聲明

讀者的正常聲明

用戶代理的聲明

（5）層疊

1.找出所有相關(guān)的規(guī)則，這些規(guī)則都包含一個(gè)選擇器。

2.計(jì)算聲明的優(yōu)先級(jí)

先按來源排序

再按選擇器的特殊性排序

最終按順序

@font-face：允許網(wǎng)頁開發(fā)者為其網(wǎng)頁指定在線字體。

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

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

src：字體資源。

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

（1）opacity

opacity屬性指定了一個(gè)元素的透明度。

默認(rèn)值：1.0 ，不可繼承。

（2）新增顏色樣式rgba

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

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

默認(rèn)值：none ，不可繼承 。

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

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

（5）文字排版

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

text-overflow :確定如何向用戶發(fā)出未顯示的溢出內(nèi)容信號(hào)。

它可以被剪切，

顯示一個(gè)省略號(hào)（"..."）

（1）盒模型陰影box-shadow

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

默認(rèn)值: none ， 不可繼承。

（2）倒影-webkit-box-reflect

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

默認(rèn)值:none，不可繼承。

（3）resize

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

默認(rèn)值：none， 不可繼承。

（4）box-sizing

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

默認(rèn)值：content-box， 不可繼承。

（1）圓角border-radius

border-radius

默認(rèn)值：0， 不可繼承。

（2）邊框圖片border-image

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

默認(rèn)值： 不可繼承

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漸變可以在兩種顏色間制造出平滑的漸變效果. 用它代替圖片，可以加快頁面的載入時(shí)間、減小帶寬占用。同時(shí)，因?yàn)闈u變是由瀏覽器直接生成的，它在頁面縮放時(shí)的效果比圖片更好，因此你可以更加靈活、便捷的調(diào)整頁面布局。

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

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

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

CSS3 彈性盒子(Flexible Box 或 Flexbox)，是一種用于在頁面上布置元素的布局模式，使得當(dāng)頁面布局必須適應(yīng)不同的屏幕尺寸和不同的顯示設(shè)備時(shí)，元素可預(yù)測地運(yùn)行/列。對(duì)于許多應(yīng)用程序，彈性盒子模型提供了對(duì)塊模型的改進(jìn)，因?yàn)樗皇褂酶?dòng)，flex容器的邊緣也不會(huì)與其內(nèi)容的邊緣折疊。

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

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

主軸 與 側(cè)軸

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

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

很多移動(dòng)端瀏覽器內(nèi)核版本都超低。  

（1）老版
容器設(shè)置display為webkit-box
（注意:項(xiàng)目永遠(yuǎn)是在主軸上排列的）

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

horizontal:x軸

vertical:y軸

（注意:項(xiàng)目永遠(yuǎn)是沿著主軸的正方向排列的）

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

-webkit-box-direction: normal;

-webkit-box-direction: reverse;

富裕空間的管理（主軸）

start

end

center

justify

-webkit-box-pack:start;
不會(huì)給項(xiàng)目區(qū)分配空間，只是確定富裕空間的位置

富?？臻g的管理（側(cè)軸）

start

end

center

-webkit-box-align:center;
不會(huì)給項(xiàng)目區(qū)分配空間，只是確定富?？臻g的位置

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

-webkit-box-flex: 1;

默認(rèn)值:0 ， 不可繼承

（2）新版

容器的布局方向

flex-direction: row;

flex-direction: column;

容器的排列方向

flex-direction:row-reverse;

flex-direction:column-reverse;

更強(qiáng)大的富裕空間的管理（主軸）

justify-content: flex-start;

flex-start

flex-end

center

space-between

space-around(box 沒有的)

更強(qiáng)大的富?？臻g的管理（側(cè)軸）

align-items: stretch;

flex-start

flex-end

center

baseline(box 沒有的)

stretch(box 沒有的)

彈性空間的管理

flex-grow: 1

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

CSS3媒體查詢是響應(yīng)式方案核心。

（1）媒體類型

all： 所有媒體

braille： 盲文觸覺設(shè)備

embossed： 盲文打印機(jī)

print： 手持設(shè)備

projection： 打印預(yù)覽

screen： 彩色屏幕

speech： “聽覺”類似的媒體設(shè)備

tty： 不適用像素的設(shè)備

tv： 電視

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

width （可加max min前綴）

height （可加max min前綴）

min-width：分辨率寬度大于設(shè)置值的時(shí)候識(shí)別

max-width：分辨率寬度小于設(shè)置值的時(shí)候識(shí)別

device-width （可加max min前綴）

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

orientation：portrait ：豎屏

orientation：landscape：橫屏

（3）操作符、關(guān)鍵字

and： 連接媒體特性

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

對(duì)于所有的連接選項(xiàng)都要匹配成功才能應(yīng)用規(guī)則

or : 和and相似

對(duì)于所有的連接選項(xiàng)只要匹配成功一個(gè)就能應(yīng)用規(guī)則

not： 排除指定媒體類型

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

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

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

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

        規(guī)則；
        規(guī)則
}

在老款的瀏覽器下

@media only ---> 因?yàn)闆]有only這種設(shè)備，規(guī)則被忽略。

@media screen ---> 因?yàn)橛?b>screen這種設(shè)備而且老瀏覽器會(huì)忽略帶媒體屬性的查詢。

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

（1）欄目寬度

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

（2）欄目列數(shù)

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

（3）欄目距離

column-gap

（4）欄目間隔線

column-rule