一、CSS 選擇器有哪些？

1. 通用選擇器：選擇所有元素，不參與計算優(yōu)先級**，兼容性 IE6+

2. X id 選擇器**：選擇 id 值為 X 的元素，兼容性：IE6+

3. .X 類選擇器**： 選擇 class 包含 X 的元素，兼容性：IE6+
4. X Y 后代選擇器**： 選擇滿足 X 選擇器的后代節(jié)點中滿足 Y 選擇器的元素，兼容性：IE6+
5. X 元素選擇器**： 選擇標(biāo)所有簽為 X 的元素，兼容性：IE6+
6. :link，:visited，:focus，:hover，:active 鏈接狀態(tài)**： 選擇特定狀態(tài)的鏈接元素，順序 LoVe HAte，兼容性: IE4+
7. X + Y 直接兄弟選擇器：在X 之后第一個兄弟節(jié)點**中選擇滿足 Y 選擇器的元素，兼容性： IE7+
8. X > Y 子選擇器**： 選擇 X 的子元素中滿足 Y 選擇器的元素，兼容性： IE7+
9. X ~ Y 兄弟： 選擇X 之后所有兄弟節(jié)點**中滿足 Y 選擇器的元素，兼容性： IE7+
10. [attr]**：選擇所有設(shè)置了 attr 屬性的元素，兼容性 IE7+
11. [attr=value]**：選擇屬性值剛好為 value 的元素
12. [attr~=value]**：選擇屬性值為空白符分隔，其中一個的值剛好是 value 的元素
13. [attr|=value]**：選擇屬性值剛好為 value 或者 value-開頭的元素
14. [attr^=value]**：選擇屬性值以 value 開頭的元素
15. [attr$=value]**：選擇屬性值以 value 結(jié)尾的元素
16. [attr=value]*：選擇屬性值中包含 value 的元素
17. [:checked]**：選擇單選框，復(fù)選框，下拉框中選中狀態(tài)下的元素，兼容性：IE9+
18. X:after, X::after**：after 偽元素，選擇元素虛擬子元素（元素的最后一個子元素）CSS3 中::表示偽元素。兼容性:after 為 IE8+，::after 為 IE9+
19. hover**：鼠標(biāo)移入狀態(tài)的元素，兼容性 a 標(biāo)簽 IE4+， 所有元素 IE7+
20. not(selector)：選擇不符合 selector 的元素。不參與計算優(yōu)先級**，兼容性：IE9+
21. first-letter**：偽元素，選擇塊元素第一行的第一個字母，兼容性 IE5.5+
22. :first-line**：偽元素，選擇塊元素的第一行，兼容性 IE5.5+
23. nth-child(an + b)**：偽類，選擇前面有 an + b - 1 個兄弟節(jié)點的元素，其中 n >= 0， 兼容性 IE9+
24. nth-last-child(an + b)**：偽類，選擇后面有 an + b - 1 個兄弟節(jié)點的元素 其中 n >= 0，兼容性 IE9+
25. X:nth-of-type(an+b)：偽類，X 為選擇器，解析得到元素標(biāo)簽，選擇前面有 an + b - 1 個相同標(biāo)簽**兄弟節(jié)點的元素。兼容性 IE9+
26. X:nth-last-of-type(an+b)：偽類，X 為選擇器，解析得到元素標(biāo)簽，選擇后面有 an+b-1 個相同標(biāo)簽**兄弟節(jié)點的元素。兼容性 IE9+
27. X:first-child**：偽類，選擇滿足 X 選擇器的元素，且這個元素是其父節(jié)點的第一個子元素。兼容性 IE7+
28. X:last-child**：偽類，選擇滿足 X 選擇器的元素，且這個元素是其父節(jié)點的最后一個子元素。兼容性 IE9+
29. X:only-child**：偽類，選擇滿足 X 選擇器的元素，且這個元素是其父元素的唯一子元素。兼容性 IE9+
30. X:only-of-type：偽類，選擇 X 選擇的元素，解析得到元素標(biāo)簽**，如果該元素沒有相同類型的兄弟節(jié)點時選中它。兼容性 IE9+
31. X:first-of-type：偽類，選擇 X 選擇的元素，解析得到元素標(biāo)簽**，如果該元素 是此此類型元素的第一個兄弟。選中它。兼容性 IE9+

二、css sprite 是什么,有什么優(yōu)缺點？
優(yōu)點：
1.減少 HTTP 請求數(shù)，極大地提高頁面加載速度
2.增加圖片信息重復(fù)度，提高壓縮比，減少圖片大小
3.更換風(fēng)格方便，只需在一張或幾張圖片上修改顏色或樣式即可實現(xiàn)
缺點：
1.圖片合并麻煩
2.維護麻煩，修改一個圖片可能需要重新布局整個圖片，樣式

三、display: none;與visibility: hidden;的區(qū)別？
聯(lián)系：它們都能讓元素不可見
區(qū)別：

1. display:none;會讓元素完全從渲染樹中消失，渲染的時候不占據(jù)任何空間；visibility: hidden;不會讓元素從渲染樹消失，渲染時元素繼續(xù)占據(jù)空間，只是內(nèi)容不可見。
2. display: none;是非繼承屬性，子孫節(jié)點消失由于元素從渲染樹消失造成，通過修改子孫節(jié)點屬性無法顯示；visibility: hidden;是繼承屬性，子孫節(jié)點由于繼承了 hidden 而消失，通過設(shè)置 visibility: visible，可以讓子孫節(jié)點顯示。
3. 修改常規(guī)流中元素的 display 通常會造成文檔重排。修改 visibility 屬性只會造成本元素的重繪。
4. 讀屏器不會讀取 display: none;元素內(nèi)容；會讀取 visibility: hidden;元素內(nèi)容。

四、link與@import的區(qū)別？

1. link是 HTML 方式， @import是 CSS 方式
2. link最大限度支持并行下載，@import過多嵌套導(dǎo)致串行下載，出現(xiàn)FOUC
3. link可以通過rel="alternate stylesheet"指定候選樣式
4. 瀏覽器對link支持早于@import，可以使用@import對老瀏覽器隱藏樣式
5. @import必須在樣式規(guī)則之前，可以在 css 文件中引用其他文件
6. 總體來說：link 優(yōu)于@import

五、display: block;和display: inline;的區(qū)別？
block元素特點：
1.處于常規(guī)流中時，如果width沒有設(shè)置，會自動填充滿父容器 2.可以應(yīng)用margin/padding 3.在沒有設(shè)置高度的情況下會擴展高度以包含常規(guī)流中的子元素 4.處于常規(guī)流中時布局時在前后元素位置之間（獨占一個水平空間） 5.忽略vertical-align

inline元素特點
1.水平方向上根據(jù)direction依次布局 2.不會在元素前后進行換行 3.受white-space控制 4.margin/padding在豎直方向上無效，水平方向上有效 5.width/height屬性對非替換行內(nèi)元素?zé)o效，寬度由元素內(nèi)容決定 6.非替換行內(nèi)元素的行框高由line-height確定，替換行內(nèi)元素的行框高由height,margin,padding,border決定 6.浮動或絕對定位時會轉(zhuǎn)換為block 7.vertical-align屬性生效

六、PNG,GIF,JPG 的區(qū)別及如何選？
GIF:

1. 8 位像素，256 色
2. 無損壓縮
3. 支持簡單動畫
4. 支持 boolean 透明
5. 適合簡單動畫

JPEG：

1. 顏色限于 256
2. 有損壓縮
3. 可控制壓縮質(zhì)量
4. 不支持透明
5. 適合照片

PNG：

1. 有 PNG8 和 truecolor PNG
2. PNG8 類似 GIF 顏色上限為 256，文件小，支持 alpha 透明度，無動畫
3. 適合圖標(biāo)、背景、按鈕

八、容器包含若干浮動元素時如何清理(包含)浮動？
1.容器元素閉合標(biāo)簽前添加額外元素并設(shè)置clear: both
2.父元素觸發(fā)塊級格式化上下文(見塊級可視化上下文部分)
3.設(shè)置容器元素偽元素進行清理

九、什么是 FOUC?如何避免
Flash Of Unstyled Content：用戶定義樣式表加載之前瀏覽器使用默認(rèn)樣式顯示文檔，用戶樣式加載渲染之后再從新顯示文檔，造成頁面閃爍。解決方法：把樣式表放到文檔的head

十、外邊距折疊
毗鄰的兩個或多個margin會合并成一個 margin，叫做外邊距折疊。規(guī)則如下：

1. 兩個或多個毗鄰的普通流中的塊元素垂直方向上的 margin 會折疊
2. 浮動元素/inline-block 元素/絕對定位元素的 margin 不會和垂直方向上的其他元素的 margin 折疊
3. 創(chuàng)建了塊級格式化上下文的元素，不會和它的子元素發(fā)生 margin 折疊
4. 元素自身的 margin-bottom 和 margin-top 相鄰時也會折疊

十一、如何水平居中一個元素？

• 如果需要居中的元素為常規(guī)流中 inline 元素，為父元素設(shè)置text-align: center;即可實現(xiàn)
• 如果需要居中的元素為常規(guī)流中 block 元素，1）為元素設(shè)置寬度，2）設(shè)置左右 margin 為 auto。3）IE6 下需在父元素上設(shè)置text-align: center;,再給子元素恢復(fù)需要的值
• 如果需要居中的元素為浮動元素，1）為元素設(shè)置寬度，2）position: relative;，3）浮動方向偏移量（left 或者 right）設(shè)置為 50%，4）浮動方向上的 margin 設(shè)置為元素寬度一半乘以-1
• 如果需要居中的元素為絕對定位元素，1）為元素設(shè)置寬度，2）偏移量設(shè)置為 50%，3）偏移方向外邊距設(shè)置為元素寬度一半乘以-1
• 如果需要居中的元素為絕對定位元素，1）為元素設(shè)置寬度，2）設(shè)置左右偏移量都為 0,3）設(shè)置左右外邊距都為 auto

十二、如何豎直居中一個元素
需要居中元素為單行文本，為包含文本的元素設(shè)置大于font-size的line-height：