往期點這里：↓
CSS面試題匯總（一）
CSS面試題匯總（二）

21. li 與 li 之間有看不見的空白間隔是什么原因引起的？有什么解決辦法？

參考答案：瀏覽器的默認行為是把 inline 元素間的空白字符（空格換行 tab）渲染成一個空格，也就是我們上面的代碼<li>換行后會產生換行字符，而它會變成一個空格，當然空格就占用一個字符的寬度。

解決方案：

方法一：既然是因為 <li> 換行導致的，那就可以將 <li> 代碼全部寫在一排，如下

<div class="wrap"><h3>li標簽空白測試</h3><ul><li class="part1"></li><li class="part2"></li><li class="part3"></li><li class="part4"></li></ul> </div>

方法二：我們為了代碼美觀以及方便修改，很多時候我們不可能將 <li> 全部寫在一排，那怎么辦？既然是空格占一個字符的寬度，那我們索性就將 <ul> 內的字符尺寸直接設為 0，將下面樣式放入樣式表，問題解決。

.wrap ul {font-size: 0px; }

但隨著而來的就是 <ul> 中的其他文字就不見了，因為其尺寸被設為 0px 了，我們只好將他們重新設定字符尺寸。
方法三：本來以為方法二能夠完全解決問題，但經測試，將 li 父級標簽字符設置為 0 在 Safari 瀏覽器依然出現間隔空白；既然設置字符大小為 0 不行，那咱就將間隔消除了，將下面代碼替換方法二的代碼，目前測試完美解決。同樣隨來而來的問題是 li 內的字符間隔也被設置了，我們需要將 li 內的字符間隔設為默認。

.wrap ul {letter-spacing: -5px; }

之后記得設置 li 內字符間隔

.wrap ul li {letter-spacing: normal; } 22. 設置元素浮動后，該元素的 display 值是多少？

參考答案：

自動變成 display:block

23. 怎么讓 Chrome 支持小于 12px 的文字？

參考答案：

css3 的 transform 屬性，設置值為 scale(x, y) 定義 2D 縮放轉換

示例：

-webkit-transform: scale(0. 50); 24. display:inline-block 什么時候會顯示間隙？

參考答案：

間隙產生的原因是因為，換行或空格會占據一定的位置

推薦解決方法：

父元素中設置

font-size:0; letter-spaceing:-4px; 25.png、jpg、gif 這些圖片格式解釋一下，分別什么時候用？，webp 呢

參考答案：

gif 圖形交換格式，索引顏色格式，顏色少的情況下，產生的文件極小，支持背景透明，動畫，圖形漸進，無損壓縮（適合線條，圖標等），缺點只有 256 種顏色

jpg 支持上百萬種顏色，有損壓縮，壓縮比可達 180：1，而且質量受損不明顯，不支持圖形漸進與背景透明，不支持動畫

png 為替代 gif 產生的，位圖文件，支持透明，半透明，不透明。不支持動畫，無損圖像格式。Png8 簡單說是靜態 gif，也只有 256 色，png24 不透明，但不止 256 色。

webp 谷歌開發的旨在加快圖片加載速度的圖片格式，圖片壓縮體積是 jpeg 的 2/3，有損壓縮。高版本的 W3C 瀏覽器才支持，google39+，safari7+

26. style 標簽寫在 body 后與 body 前有什么區別？

參考答案：

從上向下加載，加載順序不同

27. 超鏈接訪問過后 hover 樣式就不出現的問題是什么？如何解決？

參考答案：

被點擊訪問過的超鏈接樣式不在具有 hover 和 active 了, 解決方法是改變 CSS 屬性的排列順序: L-V-H-A（link, visited, hover, active）

28. 什么是 Css Hack？ie6, 7, 8 的 hack 分別是什么？

參考答案：

針對不同的瀏覽器寫不同的 CSS code 的過程，就是 CSS hack。

示例如下：

#test {width: 300px;height: 300px;background-color: blue;/_firefox_/ background-color: red\9;/_all ie_/ background-color: yellow;/_ie8_/+background-color: pink;/_ie7_/ \_background-color: orange;/_ie6_/ }:root #test {background-color: purple\9; }/*ie9*/@media all and (min-width:0px) {#test {background-color: black;} }/*opera*/@media screen and (-webkit-min-device-pixel-ratio:0) {#test {background-color: gray;} }/*chrome and safari*/ 29. 重置（resetting）CSS 和 標準化（normalizing）CSS 的區別是什么？你會選擇哪種方式，為什么？

參考答案：

• 重置（Resetting）： 重置意味著除去所有的瀏覽器默認樣式。對于頁面所有的元素，像 margin 、 padding 、 font-size 這些樣式全部置成一樣。你將必須重新定義各種元素的樣式。
• 標準化（Normalizing）： 標準化沒有去掉所有的默認樣式，而是保留了有用的一部分，同時還糾正了一些常見錯誤。

當需要實現非常個性化的網頁設計時，我會選擇重置的方式，因為我要寫很多自定義的樣式以滿足設計需求，這時候就不再需要標準化的默認樣式了。

解析：參考

30. css sprite 是什么, 有什么優缺點

參考答案：

概念：將多個小圖片拼接到一個圖片中。通過 background-position 和元素尺寸調節需要顯示的背景圖案。

優點：

• 減少 HTTP 請求數，極大地提高頁面加載速度。
• 增加圖片信息重復度，提高壓縮比，減少圖片大小。
• 更換風格方便，只需在一張或幾張圖片上修改顏色或樣式即可實現。

缺點：

• 圖片合并麻煩。
• 維護麻煩，修改一個圖片可能需要從新布局整個圖片，樣式。

總結

以上是生活随笔為你收集整理的CSS面试题汇总（三）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。