目錄1. CSS3中的盒模型2. display:none與visibility:hidden的區別3. 說一說CSS的sprite（精靈圖）4. position的屬性值有哪些？5. PNG、GIF、JPG、WEBP的區別以及如何選擇？6. CSS選擇器有哪些？優先級？7. 浮動相關（1）什么時候需要清除浮動？

（2）如何清除浮動？

專題推薦：2020年CSS面試題匯總（最新）

1. CSS3中的盒模型

CSS3中的盒模型有以下兩種：標準盒模型、IE盒模型

標準盒模型和IE盒模型的區別就是：標準盒模型的寬高指的是內容的寬高，而IE盒模型的寬高指的是內容，內邊距，邊框的總和。

在CSS3中，可以使用box-sizeing:border-box將普通盒模型轉化為IE盒模型。有時候我們已經設置了一個盒子的寬高，但是，如果想要改變border，這樣盒子的大小就會發生改變，我們就可以將其轉化為IE盒模型，就不用每次計算盒子內容大小了。

在盒子模型中

box-sizeing:content-box表示標準盒模型（默認值）box-sizeing:border-box表示IE盒模型（也就是怪異盒模型）

除此之外，還有：Flex彈性伸縮盒模型

2. display:none與visibility:hidden的區別

這兩個屬性都是讓元素隱藏不可見

區別：

（1）在渲染樹中

display:none會讓元素完全中渲染樹中消失，渲染的時候不會占據任何空間；visibility:hidden不會讓元素從渲染樹中消失，渲染的元素還會占據相應的空間，只是內容不可見

（2）繼承

display:none是非繼承屬性，他的子孫節點會隨著父節點從渲染樹消失，通過修改子孫節點的屬性也無法顯示。visibility:hidden是繼承屬性，子孫節點消失是由于繼承了hidden，通過設置visibility:visible可以讓子孫節點顯示。

（3）修改常規文檔流中的元素的display通常會造成文檔的重排，但是修改visibility屬性只會造成本元素的重繪

（4）如果使用讀屏器，設置為display:none的內容不會被讀取，設置為visibility:hidden的內容會被讀取。visibility:hidden

3. 說一說CSS的sprite（精靈圖）

概念：

精靈圖就是將多個小圖片拼接在一個圖片中，使用的時候通過background-position元素尺寸調節需要顯示的背景圖案。

優點：

減少HTTP請求數，在一定程度上提高了頁面的加載速度減少圖片的體積，因為每個圖片都有一個頭信息，把多個圖片放在一起，會共用一個頭信息，較少了圖片的字節數更換風格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變。減少了圖片命名的困擾，只要給一張或幾張圖片命名即可

缺點：

維護比較麻煩，如果頁面背景有一點改變，就需要修改整個合并的圖片合并比較麻煩，需要將多張圖片有序的合理的合并為一張圖片，還要預留一定的空間，防止出現不必要的背景在寬屏或者高分辨率屏幕下的自適應頁面，如果圖片不夠寬，就可能出現背景斷裂的情況4. position的屬性值有哪些？

屬性值 概述

absolute生成絕對定位的元素，相對于static定位以外的一個父元素進行定位relative生成相對定位的元素，相對于其原來的位置進行定位fixed生成絕對定位的元素，相對于瀏覽器窗口進行定位static默認值，沒有定位，元素出現在正常的文檔流中inherit規定從父元素繼承position屬性的值5. PNG、GIF、JPG、WEBP的區別以及如何選擇？

（1）GIF

GIF圖片只存儲8位索引，最多支持256色，采用無損壓縮，尺寸較小支持透明和簡單動畫

適用于：色彩簡單的logo，icon，線框圖，簡單的動畫

（2）JPG

采用有損壓縮，可以控制壓縮的質量采用直接色，色彩豐富不支持透明

適用于：色彩豐富的圖片、漸變圖像

（3）PNG

png-8是采用無損壓縮，基于8位索引色的位圖格式，比gif的透明的支持更好，同等質量下大小也更小，但是不支持動畫。適用于圖標，背景，按鈕。png-24采用無損壓縮，是基于直接色的位圖格式，大小相對以上幾種更大，但是圖片質量高，適用于源文件或者需要二次編輯的圖片格式的保存。

（4）WEBP

由Google開發，體積更小支持有損壓縮和無損壓縮支持透明和動畫

適用于：支持webp的APP或網頁

格式 優點 缺點 適用場景

gif文件小，支持動畫、透明，無兼容性問題只支持256種顏色色彩簡單的logo、icon、動圖jpg色彩豐富，文件小有損壓縮，反復保存圖片質量下降明顯色彩豐富的圖片/漸變圖像png無損壓縮，支持透明，簡單圖片尺寸小不支持動畫，色彩豐富的圖片尺寸大logo/icon/透明圖webp文件小，支持有損和無損壓縮，支持動畫、透明瀏覽器兼容性不好支持webp格式的app和webview6. CSS選擇器有哪些？優先級？

選擇器 格式

標簽選擇器p類選擇器#myclassnameid選擇器#myid相鄰兄弟選擇器h1+p子選擇器ul>li后代選擇器li a通配符選擇器*屬性選擇器a[ref=“eee”]偽類選擇器li:last-child

如果需要選擇緊接在另一個元素后的元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器.例如，如果要增加緊接在 h1 元素后出現的段落的上邊距，可以這樣寫：

h1 + p {margin-top:50px;}

對于選擇器的優先級：

元素選擇器：1class選擇器：10id 選擇器：100元素標簽：1000

需要注意的是：

!important聲明的樣式的優先級最高如果優先級相同，則最后出現的樣式生效繼承得到的樣式的優先級最低

屬性繼承性：

可以繼承的屬性：font-size、font-family、color不可以繼承的樣式：border、padding、margin、width、height7. 浮動相關

元素設置為浮動之后，display會自動變成block。

（1）什么時候需要清除浮動？

浮動造成的問題如下：

父元素的高度無法撐開，影響與父級同級的元素與浮動元素同級的非浮動元素給跟隨在它后面若一個元素浮動，則其前面的元素也需要浮動，否則會影響頁面的結構（2）如何清除浮動？

清除浮動的方式如下：

給父級p定義height屬性最后一個浮動元素之后添加一個空的p標簽，并添加clear:both樣式包含浮動元素的父級標簽添加overflow:hidden或者overflow:auto

目錄1. CSS3中的盒模型2. display:none與visibility:hidden的區別3. 說一說CSS的sprite（精靈圖）4. position的屬性值有哪些？5. PNG、GIF、JPG、WEBP的區別以及如何選擇？6. CSS選擇器有哪些？優先級？7. 浮動相關（1）什么時候需要清除浮動？（2）如何清除浮動？1. CSS3中的盒模型

CSS3中的盒模型有以下兩種：標準盒模型、IE盒模型

標準盒模型和IE盒模型的區別就是：標準盒模型的寬高指的是內容的寬高，而IE盒模型的寬高指的是內容，內邊距，邊框的總和。

在CSS3中，可以使用box-sizeing:border-box將普通盒模型轉化為IE盒模型。有時候我們已經設置了一個盒子的寬高，但是，如果想要改變border，這樣盒子的大小就會發生改變，我們就可以將其轉化為IE盒模型，就不用每次計算盒子內容大小了。

在盒子模型中

box-sizeing:content-box表示標準盒模型（默認值）box-sizeing:border-box表示IE盒模型（也就是怪異盒模型）

除此之外，還有：Flex彈性伸縮盒模型

2. display:none與visibility:hidden的區別

這兩個屬性都是讓元素隱藏不可見

區別：

（1）在渲染樹中

display:none會讓元素完全中渲染樹中消失，渲染的時候不會占據任何空間；visibility:hidden不會讓元素從渲染樹中消失，渲染的元素還會占據相應的空間，只是內容不可見

（2）繼承

display:none是非繼承屬性，他的子孫節點會隨著父節點從渲染樹消失，通過修改子孫節點的屬性也無法顯示。visibility:hidden是繼承屬性，子孫節點消失是由于繼承了hidden，通過設置visibility:visible可以讓子孫節點顯示。

（3）修改常規文檔流中的元素的display通常會造成文檔的重排，但是修改visibility屬性只會造成本元素的重繪

（4）如果使用讀屏器，設置為display:none的內容不會被讀取，設置為visibility:hidden的內容會被讀取。visibility:hidden

3. 說一說CSS的sprite（精靈圖）

概念：

精靈圖就是將多個小圖片拼接在一個圖片中，使用的時候通過background-position元素尺寸調節需要顯示的背景圖案。

優點：

減少HTTP請求數，在一定程度上提高了頁面的加載速度減少圖片的體積，因為每個圖片都有一個頭信息，把多個圖片放在一起，會共用一個頭信息，較少了圖片的字節數更換風格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變。減少了圖片命名的困擾，只要給一張或幾張圖片命名即可

缺點：

維護比較麻煩，如果頁面背景有一點改變，就需要修改整個合并的圖片合并比較麻煩，需要將多張圖片有序的合理的合并為一張圖片，還要預留一定的空間，防止出現不必要的背景在寬屏或者高分辨率屏幕下的自適應頁面，如果圖片不夠寬，就可能出現背景斷裂的情況4. position的屬性值有哪些？

屬性值 概述

absolute生成絕對定位的元素，相對于static定位以外的一個父元素進行定位relative生成相對定位的元素，相對于其原來的位置進行定位fixed生成絕對定位的元素，相對于瀏覽器窗口進行定位static默認值，沒有定位，元素出現在正常的文檔流中inherit規定從父元素繼承position屬性的值5. PNG、GIF、JPG、WEBP的區別以及如何選擇？

（1）GIF

GIF圖片只存儲8位索引，最多支持256色，采用無損壓縮，尺寸較小支持透明和簡單動畫

適用于：色彩簡單的logo，icon，線框圖，簡單的動畫

（2）JPG

采用有損壓縮，可以控制壓縮的質量采用直接色，色彩豐富不支持透明

適用于：色彩豐富的圖片、漸變圖像

（3）PNG

png-8是采用無損壓縮，基于8位索引色的位圖格式，比gif的透明的支持更好，同等質量下大小也更小，但是不支持動畫。適用于圖標，背景，按鈕。png-24采用無損壓縮，是基于直接色的位圖格式，大小相對以上幾種更大，但是圖片質量高，適用于源文件或者需要二次編輯的圖片格式的保存。

（4）WEBP

由Google開發，體積更小支持有損壓縮和無損壓縮支持透明和動畫

適用于：支持webp的APP或網頁

格式 優點 缺點 適用場景

gif文件小，支持動畫、透明，無兼容性問題只支持256種顏色色彩簡單的logo、icon、動圖jpg色彩豐富，文件小有損壓縮，反復保存圖片質量下降明顯色彩豐富的圖片/漸變圖像png無損壓縮，支持透明，簡單圖片尺寸小不支持動畫，色彩豐富的圖片尺寸大logo/icon/透明圖webp文件小，支持有損和無損壓縮，支持動畫、透明瀏覽器兼容性不好支持webp格式的app和webview6. CSS選擇器有哪些？優先級？

選擇器 格式

標簽選擇器p類選擇器#myclassnameid選擇器#myid相鄰兄弟選擇器h1+p子選擇器ul>li后代選擇器li a通配符選擇器*屬性選擇器a[ref=“eee”]偽類選擇器li:last-child

如果需要選擇緊接在另一個元素后的元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器.例如，如果要增加緊接在 h1 元素后出現的段落的上邊距，可以這樣寫：

h1 + p {margin-top:50px;}

對于選擇器的優先級：

元素選擇器：1class選擇器：10id 選擇器：100元素標簽：1000

需要注意的是：

!important聲明的樣式的優先級最高如果優先級相同，則最后出現的樣式生效繼承得到的樣式的優先級最低

屬性繼承性：

可以繼承的屬性：font-size、font-family、color不可以繼承的樣式：border、padding、margin、width、height7. 浮動相關

元素設置為浮動之后，display會自動變成block。

（1）什么時候需要清除浮動？

浮動造成的問題如下：

父元素的高度無法撐開，影響與父級同級的元素與浮動元素同級的非浮動元素給跟隨在它后面若一個元素浮動，則其前面的元素也需要浮動，否則會影響頁面的結構（2）如何清除浮動？

清除浮動的方式如下：

給父級p定義height屬性最后一個浮動元素之后添加一個空的p標簽，并添加clear:both樣式包含浮動元素的父級標簽添加overflow:hidden或者overflow:auto

相關教程推薦：CSS視頻教程

總結

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

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