一开伏、CSS 選擇器有哪些坏挠？
- 通用選擇器：選擇所有元素，不參與計算優(yōu)先級**奠涌，兼容性 IE6+
-
X id 選擇器**：選擇 id 值為 X 的元素宪巨，兼容性：IE6+
- .X 類選擇器**： 選擇 class 包含 X 的元素，兼容性：IE6+
- X Y 后代選擇器**： 選擇滿足 X 選擇器的后代節(jié)點中滿足 Y 選擇器的元素溜畅，兼容性：IE6+
- X 元素選擇器**： 選擇標所有簽為 X 的元素捏卓，兼容性：IE6+
- :link，:visited慈格，:focus天吓，:hover贿肩，:active 鏈接狀態(tài)**： 選擇特定狀態(tài)的鏈接元素，順序 LoVe HAte龄寞，兼容性: IE4+
- X + Y 直接兄弟選擇器：在X 之后第一個兄弟節(jié)點**中選擇滿足 Y 選擇器的元素汰规，兼容性： IE7+
- X > Y 子選擇器**： 選擇 X 的子元素中滿足 Y 選擇器的元素，兼容性： IE7+
- X ~ Y 兄弟： 選擇X 之后所有兄弟節(jié)點**中滿足 Y 選擇器的元素物邑，兼容性： IE7+
- [attr]**：選擇所有設置了 attr 屬性的元素溜哮，兼容性 IE7+
- [attr=value]**：選擇屬性值剛好為 value 的元素
- [attr~=value]**：選擇屬性值為空白符分隔，其中一個的值剛好是 value 的元素
- [attr|=value]**：選擇屬性值剛好為 value 或者 value-開頭的元素
- [attr^=value]**：選擇屬性值以 value 開頭的元素
- [attr$=value]**：選擇屬性值以 value 結尾的元素
- [attr=value]*：選擇屬性值中包含 value 的元素
- [:checked]**：選擇單選框色解，復選框茂嗓，下拉框中選中狀態(tài)下的元素，兼容性：IE9+
- X:after, X::after**：after 偽元素科阎，選擇元素虛擬子元素（元素的最后一個子元素）CSS3 中::表示偽元素述吸。兼容性:after 為 IE8+，::after 為 IE9+
- hover**：鼠標移入狀態(tài)的元素锣笨，兼容性 a 標簽 IE4+蝌矛， 所有元素 IE7+
- not(selector)：選擇不符合 selector 的元素。不參與計算優(yōu)先級**错英，兼容性：IE9+
- first-letter**：偽元素入撒，選擇塊元素第一行的第一個字母，兼容性 IE5.5+
- :first-line**：偽元素椭岩，選擇塊元素的第一行茅逮，兼容性 IE5.5+
- nth-child(an + b)**：偽類，選擇前面有 an + b - 1 個兄弟節(jié)點的元素判哥，其中 n >= 0献雅， 兼容性 IE9+
- nth-last-child(an + b)**：偽類，選擇后面有 an + b - 1 個兄弟節(jié)點的元素 其中 n >= 0塌计，兼容性 IE9+
- X:nth-of-type(an+b)：偽類挺身，X 為選擇器，解析得到元素標簽夺荒，選擇前面有 an + b - 1 個相同標簽**兄弟節(jié)點的元素瞒渠。兼容性 IE9+
- X:nth-last-of-type(an+b)：偽類良蒸，X 為選擇器技扼，解析得到元素標簽，選擇后面有 an+b-1 個相同標簽**兄弟節(jié)點的元素嫩痰。兼容性 IE9+
- X:first-child**：偽類剿吻，選擇滿足 X 選擇器的元素，且這個元素是其父節(jié)點的第一個子元素串纺。兼容性 IE7+
- X:last-child**：偽類丽旅，選擇滿足 X 選擇器的元素椰棘，且這個元素是其父節(jié)點的最后一個子元素。兼容性 IE9+
- X:only-child**：偽類榄笙，選擇滿足 X 選擇器的元素邪狞，且這個元素是其父元素的唯一子元素。兼容性 IE9+
- X:only-of-type：偽類茅撞，選擇 X 選擇的元素帆卓，解析得到元素標簽**，如果該元素沒有相同類型的兄弟節(jié)點時選中它米丘。兼容性 IE9+
- X:first-of-type：偽類剑令，選擇 X 選擇的元素，解析得到元素標簽**拄查，如果該元素 是此此類型元素的第一個兄弟吁津。選中它。兼容性 IE9+
二堕扶、css sprite 是什么,有什么優(yōu)缺點碍脏？
優(yōu)點：
1.減少 HTTP 請求數(shù)，極大地提高頁面加載速度
2.增加圖片信息重復度挣柬，提高壓縮比潮酒，減少圖片大小
3.更換風格方便，只需在一張或幾張圖片上修改顏色或樣式即可實現(xiàn)
缺點：
1.圖片合并麻煩
2.維護麻煩邪蛔，修改一個圖片可能需要重新布局整個圖片急黎，樣式
三、display: none;與visibility: hidden;的區(qū)別侧到？
聯(lián)系：它們都能讓元素不可見
區(qū)別：
- display:none;會讓元素完全從渲染樹中消失勃教，渲染的時候不占據任何空間；visibility: hidden;不會讓元素從渲染樹消失匠抗，渲染時元素繼續(xù)占據空間故源，只是內容不可見。
- display: none;是非繼承屬性汞贸，子孫節(jié)點消失由于元素從渲染樹消失造成绳军，通過修改子孫節(jié)點屬性無法顯示；visibility: hidden;是繼承屬性矢腻，子孫節(jié)點由于繼承了 hidden 而消失门驾，通過設置 visibility: visible，可以讓子孫節(jié)點顯示多柑。
- 修改常規(guī)流中元素的 display 通常會造成文檔重排奶是。修改 visibility 屬性只會造成本元素的重繪。
- 讀屏器不會讀取 display: none;元素內容；會讀取 visibility: hidden;元素內容聂沙。
四秆麸、link與@import的區(qū)別？
-
link是 HTML 方式及汉，@import是 CSS 方式 -
link最大限度支持并行下載沮趣，@import過多嵌套導致串行下載，出現(xiàn)FOUC -
link可以通過rel="alternate stylesheet"指定候選樣式 - 瀏覽器對
link支持早于@import坷随，可以使用@import對老瀏覽器隱藏樣式 -
@import必須在樣式規(guī)則之前兔毒，可以在 css 文件中引用其他文件 - 總體來說：link 優(yōu)于@import
五、display: block;和display: inline;的區(qū)別甸箱？
block元素特點：
1.處于常規(guī)流中時育叁，如果width沒有設置，會自動填充滿父容器 2.可以應用margin/padding 3.在沒有設置高度的情況下會擴展高度以包含常規(guī)流中的子元素 4.處于常規(guī)流中時布局時在前后元素位置之間（獨占一個水平空間） 5.忽略vertical-align
inline元素特點
1.水平方向上根據direction依次布局 2.不會在元素前后進行換行 3.受white-space控制 4.margin/padding在豎直方向上無效芍殖，水平方向上有效 5.width/height屬性對非替換行內元素無效豪嗽，寬度由元素內容決定 6.非替換行內元素的行框高由line-height確定，替換行內元素的行框高由height,margin,padding,border決定 6.浮動或絕對定位時會轉換為block 7.vertical-align屬性生效
六豌骏、PNG,GIF,JPG 的區(qū)別及如何選龟梦？
GIF:
- 8 位像素，256 色
- 無損壓縮
- 支持簡單動畫
- 支持 boolean 透明
- 適合簡單動畫
JPEG：
- 顏色限于 256
- 有損壓縮
- 可控制壓縮質量
- 不支持透明
- 適合照片
PNG：
- 有 PNG8 和 truecolor PNG
- PNG8 類似 GIF 顏色上限為 256窃躲，文件小计贰，支持 alpha 透明度，無動畫
- 適合圖標蒂窒、背景躁倒、按鈕
八、容器包含若干浮動元素時如何清理(包含)浮動洒琢？
1.容器元素閉合標簽前添加額外元素并設置clear: both
2.父元素觸發(fā)塊級格式化上下文(見塊級可視化上下文部分)
3.設置容器元素偽元素進行清理
九秧秉、什么是 FOUC?如何避免
Flash Of Unstyled Content：用戶定義樣式表加載之前瀏覽器使用默認樣式顯示文檔，用戶樣式加載渲染之后再從新顯示文檔衰抑，造成頁面閃爍象迎。解決方法：把樣式表放到文檔的head
十、外邊距折疊
毗鄰的兩個或多個margin會合并成一個 margin呛踊，叫做外邊距折疊砾淌。規(guī)則如下：
- 兩個或多個毗鄰的普通流中的塊元素垂直方向上的 margin 會折疊
- 浮動元素/inline-block 元素/絕對定位元素的 margin 不會和垂直方向上的其他元素的 margin 折疊
- 創(chuàng)建了塊級格式化上下文的元素，不會和它的子元素發(fā)生 margin 折疊
- 元素自身的 margin-bottom 和 margin-top 相鄰時也會折疊
十一谭网、如何水平居中一個元素汪厨？
- 如果需要居中的元素為常規(guī)流中 inline 元素，為父元素設置text-align: center;即可實現(xiàn)
- 如果需要居中的元素為常規(guī)流中 block 元素蜻底，1）為元素設置寬度骄崩，2）設置左右 margin 為 auto。3）IE6 下需在父元素上設置text-align: center;,再給子元素恢復需要的值
- 如果需要居中的元素為浮動元素薄辅，1）為元素設置寬度要拂，2）position: relative;，3）浮動方向偏移量（left 或者 right）設置為 50%站楚，4）浮動方向上的 margin 設置為元素寬度一半乘以-1
- 如果需要居中的元素為絕對定位元素脱惰，1）為元素設置寬度，2）偏移量設置為 50%窿春，3）偏移方向外邊距設置為元素寬度一半乘以-1
- 如果需要居中的元素為絕對定位元素拉一，1）為元素設置寬度，2）設置左右偏移量都為 0,3）設置左右外邊距都為 auto
十二旧乞、如何豎直居中一個元素
需要居中元素為單行文本蔚润，為包含文本的元素設置大于font-size的line-height：
