這篇文章將為大家詳細(xì)講解有關(guān)重要的七道CSS面試題，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

10年積累的成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有柳林免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

目錄

• 1. CSS3中的盒模型
• 2. display:none與visibility:hidden的區(qū)別
• 3. 說(shuō)一說(shuō)CSS的sprite（精靈圖）
• 4. position的屬性值有哪些？
• 5. PNG、GIF、JPG、WEBP的區(qū)別以及如何選擇？
• 6. CSS選擇器有哪些？?jī)?yōu)先級(jí)？
• 7. 浮動(dòng)相關(guān)
• （1）什么時(shí)候需要清除浮動(dòng)？
• （2）如何清除浮動(dòng)？

1. CSS3中的盒模型

CSS3中的盒模型有以下兩種：標(biāo)準(zhǔn)盒模型、IE盒模型

• 標(biāo)準(zhǔn)盒模型和IE盒模型的區(qū)別就是：標(biāo)準(zhǔn)盒模型的寬高指的是內(nèi)容的寬高，而IE盒模型的寬高指的是內(nèi)容，內(nèi)邊距，邊框的總和。

• 在CSS3中，可以使用box-sizeing:border-box將普通盒模型轉(zhuǎn)化為IE盒模型。有時(shí)候我們已經(jīng)設(shè)置了一個(gè)盒子的寬高，但是，如果想要改變border，這樣盒子的大小就會(huì)發(fā)生改變，我們就可以將其轉(zhuǎn)化為IE盒模型，就不用每次計(jì)算盒子內(nèi)容大小了。

• 在盒子模型中

  • box-sizeing:content-box表示標(biāo)準(zhǔn)盒模型（默認(rèn)值）
  • box-sizeing:border-box表示IE盒模型（也就是怪異盒模型）

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

2. display:none與visibility:hidden的區(qū)別

這兩個(gè)屬性都是讓元素隱藏不可見(jiàn)

區(qū)別：

（1）在渲染樹(shù)中

• display:none會(huì)讓元素完全中渲染樹(shù)中消失，渲染的時(shí)候不會(huì)占據(jù)任何空間；
• visibility:hidden不會(huì)讓元素從渲染樹(shù)中消失，渲染的元素還會(huì)占據(jù)相應(yīng)的空間，只是內(nèi)容不可見(jiàn)

（2）繼承

• display:none是非繼承屬性，他的子孫節(jié)點(diǎn)會(huì)隨著父節(jié)點(diǎn)從渲染樹(shù)消失，通過(guò)修改子孫節(jié)點(diǎn)的屬性也無(wú)法顯示。
• visibility:hidden是繼承屬性，子孫節(jié)點(diǎn)消失是由于繼承了hidden，通過(guò)設(shè)置visibility:visible可以讓子孫節(jié)點(diǎn)顯示。

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

（4）如果使用讀屏器，設(shè)置為display:none的內(nèi)容不會(huì)被讀取，設(shè)置為visibility:hidden的內(nèi)容會(huì)被讀取。visibility:hidden

3. 說(shuō)一說(shuō)CSS的sprite（精靈圖）

概念：

精靈圖就是將多個(gè)小圖片拼接在一個(gè)圖片中，使用的時(shí)候通過(guò)background-position元素尺寸調(diào)節(jié)需要顯示的背景圖案。

優(yōu)點(diǎn)：

• 減少HTTP請(qǐng)求數(shù)，在一定程度上提高了頁(yè)面的加載速度
• 減少圖片的體積，因?yàn)槊總€(gè)圖片都有一個(gè)頭信息，把多個(gè)圖片放在一起，會(huì)共用一個(gè)頭信息，較少了圖片的字節(jié)數(shù)
• 更換風(fēng)格方便，只需要在一張或少?gòu)垐D片上修改圖片的顏色或樣式，整個(gè)網(wǎng)頁(yè)的風(fēng)格就可以改變。
• 減少了圖片命名的困擾，只要給一張或幾張圖片命名即可

缺點(diǎn)：

• 維護(hù)比較麻煩，如果頁(yè)面背景有一點(diǎn)改變，就需要修改整個(gè)合并的圖片
• 合并比較麻煩，需要將多張圖片有序的合理的合并為一張圖片，還要預(yù)留一定的空間，防止出現(xiàn)不必要的背景
• 在寬屏或者高分辨率屏幕下的自適應(yīng)頁(yè)面，如果圖片不夠?qū)挘涂赡艹霈F(xiàn)背景斷裂的情況

4. position的屬性值有哪些？

屬性值	概述
absolute	生成絕對(duì)定位的元素，相對(duì)于static定位以外的一個(gè)父元素進(jìn)行定位
relative	生成相對(duì)定位的元素，相對(duì)于其原來(lái)的位置進(jìn)行定位
fixed	生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位
static	默認(rèn)值，沒(méi)有定位，元素出現(xiàn)在正常的文檔流中
inherit	規(guī)定從父元素繼承position屬性的值

5. PNG、GIF、JPG、WEBP的區(qū)別以及如何選擇？

（1）GIF

• GIF圖片只存儲(chǔ)8位索引，最多支持256色，
• 采用無(wú)損壓縮，尺寸較小
• 支持透明和簡(jiǎn)單動(dòng)畫

適用于：色彩簡(jiǎn)單的logo，icon，線框圖，簡(jiǎn)單的動(dòng)畫

（2）JPG

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

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

（3）PNG

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

（4）WEBP

• 由Google開(kāi)發(fā)，體積更小
• 支持有損壓縮和無(wú)損壓縮
• 支持透明和動(dòng)畫

適用于：支持webp的APP或網(wǎng)頁(yè)

格式	優(yōu)點(diǎn)	缺點(diǎn)	適用場(chǎng)景
gif	文件小，支持動(dòng)畫、透明，無(wú)兼容性問(wèn)題	只支持256種顏色	色彩簡(jiǎn)單的logo、icon、動(dòng)圖
jpg	色彩豐富，文件小	有損壓縮，反復(fù)保存圖片質(zhì)量下降明顯	色彩豐富的圖片/漸變圖像
png	無(wú)損壓縮，支持透明，簡(jiǎn)單圖片尺寸小	不支持動(dòng)畫，色彩豐富的圖片尺寸大	logo/icon/透明圖
webp	文件小，支持有損和無(wú)損壓縮，支持動(dòng)畫、透明	瀏覽器兼容性不好	支持webp格式的app和webview

6. CSS選擇器有哪些？?jī)?yōu)先級(jí)？

選擇器	格式
標(biāo)簽選擇器	p
類選擇器	#myclassname
id選擇器	#myid
相鄰兄弟選擇器	h2+p
子選擇器	ul>li
后代選擇器	li a
通配符選擇器	*
屬性選擇器	a[ref=“eee”]
偽類選擇器	li:last-child

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

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

對(duì)于選擇器的優(yōu)先級(jí)：

• 元素選擇器：1
• class選擇器：10
• id 選擇器：100
• 元素標(biāo)簽：1000

需要注意的是：

• !important聲明的樣式的優(yōu)先級(jí)最高
• 如果優(yōu)先級(jí)相同，則最后出現(xiàn)的樣式生效
• 繼承得到的樣式的優(yōu)先級(jí)最低

屬性繼承性：

• 可以繼承的屬性：font-size、font-family、color
• 不可以繼承的樣式：border、padding、margin、width、height

7. 浮動(dòng)相關(guān)

元素設(shè)置為浮動(dòng)之后，display會(huì)自動(dòng)變成block。

（1）什么時(shí)候需要清除浮動(dòng)？

浮動(dòng)造成的問(wèn)題如下：

• 父元素的高度無(wú)法撐開(kāi)，影響與父級(jí)同級(jí)的元素
• 與浮動(dòng)元素同級(jí)的非浮動(dòng)元素給跟隨在它后面
• 若一個(gè)元素浮動(dòng)，則其前面的元素也需要浮動(dòng)，否則會(huì)影響頁(yè)面的結(jié)構(gòu)

（2）如何清除浮動(dòng)？

清除浮動(dòng)的方式如下：

• 給父級(jí)p定義height屬性
• 最后一個(gè)浮動(dòng)元素之后添加一個(gè)空的p標(biāo)簽，并添加clear:both樣式
• 包含浮動(dòng)元素的父級(jí)標(biāo)簽添加overflow:hidden或者overflow:auto

undefined

目錄

• 1. CSS3中的盒模型
• 2. display:none與visibility:hidden的區(qū)別
• 3. 說(shuō)一說(shuō)CSS的sprite（精靈圖）
• 4. position的屬性值有哪些？
• 5. PNG、GIF、JPG、WEBP的區(qū)別以及如何選擇？
• 6. CSS選擇器有哪些？?jī)?yōu)先級(jí)？
• 7. 浮動(dòng)相關(guān)
• （1）什么時(shí)候需要清除浮動(dòng)？
• （2）如何清除浮動(dòng)？

1. CSS3中的盒模型

CSS3中的盒模型有以下兩種：標(biāo)準(zhǔn)盒模型、IE盒模型

• 標(biāo)準(zhǔn)盒模型和IE盒模型的區(qū)別就是：標(biāo)準(zhǔn)盒模型的寬高指的是內(nèi)容的寬高，而IE盒模型的寬高指的是內(nèi)容，內(nèi)邊距，邊框的總和。

• 在CSS3中，可以使用box-sizeing:border-box將普通盒模型轉(zhuǎn)化為IE盒模型。有時(shí)候我們已經(jīng)設(shè)置了一個(gè)盒子的寬高，但是，如果想要改變border，這樣盒子的大小就會(huì)發(fā)生改變，我們就可以將其轉(zhuǎn)化為IE盒模型，就不用每次計(jì)算盒子內(nèi)容大小了。

• 在盒子模型中

  • box-sizeing:content-box表示標(biāo)準(zhǔn)盒模型（默認(rèn)值）
  • box-sizeing:border-box表示IE盒模型（也就是怪異盒模型）

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

2. display:none與visibility:hidden的區(qū)別

這兩個(gè)屬性都是讓元素隱藏不可見(jiàn)

區(qū)別：

（1）在渲染樹(shù)中

• display:none會(huì)讓元素完全中渲染樹(shù)中消失，渲染的時(shí)候不會(huì)占據(jù)任何空間；
• visibility:hidden不會(huì)讓元素從渲染樹(shù)中消失，渲染的元素還會(huì)占據(jù)相應(yīng)的空間，只是內(nèi)容不可見(jiàn)

（2）繼承

• display:none是非繼承屬性，他的子孫節(jié)點(diǎn)會(huì)隨著父節(jié)點(diǎn)從渲染樹(shù)消失，通過(guò)修改子孫節(jié)點(diǎn)的屬性也無(wú)法顯示。
• visibility:hidden是繼承屬性，子孫節(jié)點(diǎn)消失是由于繼承了hidden，通過(guò)設(shè)置visibility:visible可以讓子孫節(jié)點(diǎn)顯示。

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

（4）如果使用讀屏器，設(shè)置為display:none的內(nèi)容不會(huì)被讀取，設(shè)置為visibility:hidden的內(nèi)容會(huì)被讀取。visibility:hidden

3. 說(shuō)一說(shuō)CSS的sprite（精靈圖）

概念：

精靈圖就是將多個(gè)小圖片拼接在一個(gè)圖片中，使用的時(shí)候通過(guò)background-position元素尺寸調(diào)節(jié)需要顯示的背景圖案。

優(yōu)點(diǎn)：

• 減少HTTP請(qǐng)求數(shù)，在一定程度上提高了頁(yè)面的加載速度
• 減少圖片的體積，因?yàn)槊總€(gè)圖片都有一個(gè)頭信息，把多個(gè)圖片放在一起，會(huì)共用一個(gè)頭信息，較少了圖片的字節(jié)數(shù)
• 更換風(fēng)格方便，只需要在一張或少?gòu)垐D片上修改圖片的顏色或樣式，整個(gè)網(wǎng)頁(yè)的風(fēng)格就可以改變。
• 減少了圖片命名的困擾，只要給一張或幾張圖片命名即可

缺點(diǎn)：

• 維護(hù)比較麻煩，如果頁(yè)面背景有一點(diǎn)改變，就需要修改整個(gè)合并的圖片
• 合并比較麻煩，需要將多張圖片有序的合理的合并為一張圖片，還要預(yù)留一定的空間，防止出現(xiàn)不必要的背景
• 在寬屏或者高分辨率屏幕下的自適應(yīng)頁(yè)面，如果圖片不夠?qū)?，就可能出現(xiàn)背景斷裂的情況

4. position的屬性值有哪些？

屬性值	概述
absolute	生成絕對(duì)定位的元素，相對(duì)于static定位以外的一個(gè)父元素進(jìn)行定位
relative	生成相對(duì)定位的元素，相對(duì)于其原來(lái)的位置進(jìn)行定位
fixed	生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位
static	默認(rèn)值，沒(méi)有定位，元素出現(xiàn)在正常的文檔流中
inherit	規(guī)定從父元素繼承position屬性的值

5. PNG、GIF、JPG、WEBP的區(qū)別以及如何選擇？

（1）GIF

• GIF圖片只存儲(chǔ)8位索引，最多支持256色，
• 采用無(wú)損壓縮，尺寸較小
• 支持透明和簡(jiǎn)單動(dòng)畫

適用于：色彩簡(jiǎn)單的logo，icon，線框圖，簡(jiǎn)單的動(dòng)畫

（2）JPG

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

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

（3）PNG

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

（4）WEBP

• 由Google開(kāi)發(fā)，體積更小
• 支持有損壓縮和無(wú)損壓縮
• 支持透明和動(dòng)畫

適用于：支持webp的APP或網(wǎng)頁(yè)

格式	優(yōu)點(diǎn)	缺點(diǎn)	適用場(chǎng)景
gif	文件小，支持動(dòng)畫、透明，無(wú)兼容性問(wèn)題	只支持256種顏色	色彩簡(jiǎn)單的logo、icon、動(dòng)圖
jpg	色彩豐富，文件小	有損壓縮，反復(fù)保存圖片質(zhì)量下降明顯	色彩豐富的圖片/漸變圖像
png	無(wú)損壓縮，支持透明，簡(jiǎn)單圖片尺寸小	不支持動(dòng)畫，色彩豐富的圖片尺寸大	logo/icon/透明圖
webp	文件小，支持有損和無(wú)損壓縮，支持動(dòng)畫、透明	瀏覽器兼容性不好	支持webp格式的app和webview

6. CSS選擇器有哪些？?jī)?yōu)先級(jí)？

選擇器	格式
標(biāo)簽選擇器	p
類選擇器	#myclassname
id選擇器	#myid
相鄰兄弟選擇器	h2+p
子選擇器	ul>li
后代選擇器	li a
通配符選擇器	*
屬性選擇器	a[ref=“eee”]
偽類選擇器	li:last-child

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

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

對(duì)于選擇器的優(yōu)先級(jí)：

• 元素選擇器：1
• class選擇器：10
• id 選擇器：100
• 元素標(biāo)簽：1000

需要注意的是：

• !important聲明的樣式的優(yōu)先級(jí)最高
• 如果優(yōu)先級(jí)相同，則最后出現(xiàn)的樣式生效
• 繼承得到的樣式的優(yōu)先級(jí)最低

屬性繼承性：

• 可以繼承的屬性：font-size、font-family、color
• 不可以繼承的樣式：border、padding、margin、width、height

7. 浮動(dòng)相關(guān)

元素設(shè)置為浮動(dòng)之后，display會(huì)自動(dòng)變成block。

（1）什么時(shí)候需要清除浮動(dòng)？

浮動(dòng)造成的問(wèn)題如下：

• 父元素的高度無(wú)法撐開(kāi)，影響與父級(jí)同級(jí)的元素
• 與浮動(dòng)元素同級(jí)的非浮動(dòng)元素給跟隨在它后面
• 若一個(gè)元素浮動(dòng)，則其前面的元素也需要浮動(dòng)，否則會(huì)影響頁(yè)面的結(jié)構(gòu)

（2）如何清除浮動(dòng)？

清除浮動(dòng)的方式如下：

• 給父級(jí)p定義height屬性
• 最后一個(gè)浮動(dòng)元素之后添加一個(gè)空的p標(biāo)簽，并添加clear:both樣式
• 包含浮動(dòng)元素的父級(jí)標(biāo)簽添加overflow:hidden或者overflow:auto

關(guān)于重要的七道CSS面試題就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

當(dāng)前名稱：重要的七道CSS面試題-創(chuàng)新互聯(lián)
URL地址：http://www.rwnh.cn/article0/dgsdoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、虛擬主機(jī)、網(wǎng)站設(shè)計(jì)、網(wǎng)站維護(hù)、品牌網(wǎng)站設(shè)計(jì)、微信公眾號(hào)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)