CSS部分的面試題主要考察應(yīng)試者對(duì)CSS基礎(chǔ)概念模型的理解，例如文檔流、盒模型、浮動(dòng)、定位、選擇器權(quán)重、樣式繼承等。很多應(yīng)試者認(rèn)為CSS很簡(jiǎn)單，沒(méi)多少內(nèi)容，面試就是面試 JavaScript部分的內(nèi)容，這些觀點(diǎn)是錯(cuò)誤的，面試的第一關(guān)往往會(huì)考察應(yīng)試者對(duì)CSS的掌握情況。因此，CSS也常常是應(yīng)試者掉入的第一個(gè)陷阱。

1、CSS有哪些基本選擇器？它們的權(quán)重是如何表示的？

CSS基本選擇器有類(lèi)選擇器、屬性選擇器和ID選擇器。

CSS選擇器的權(quán)重預(yù)示著CSS選擇器樣式渲染的先后順序，元素樣式渲染時(shí)，權(quán)重高的選擇器樣式會(huì)覆蓋權(quán)重低的選擇器樣式。

通常將權(quán)重分為4個(gè)等級(jí)，可用0.0.0.0來(lái)表示這4個(gè)等級(jí)。

！important關(guān)鍵字優(yōu)先級(jí)最高。

注意：！importont井非選擇器，而是針對(duì)選擇器內(nèi)的單一樣式設(shè)置的。當(dāng)然，不同選擇器內(nèi)應(yīng)用 ！important的權(quán)重也是不一樣的，例如，在id選擇器內(nèi)的！important關(guān)鍵字權(quán)重要高于類(lèi)選擇器內(nèi)的 ！important關(guān)鍵字權(quán)重，即下面所說(shuō)的選擇器權(quán)重組合。

內(nèi)聯(lián)樣式（非元素器）的優(yōu)先級(jí)可看成1.0.0.0。

ID選擇器的優(yōu)先級(jí)為0.1.0.0。

類(lèi)屬性選擇器、屬性選擇器、偽類(lèi)的優(yōu)先級(jí)為0.0.1.0。

元素選擇器、偽元素選擇器的優(yōu)先級(jí)為0.0.0.1。

通配符選擇器對(duì)特殊性沒(méi)有任何貢獻(xiàn)值。

當(dāng)把選擇器組合使用的時(shí)候，相應(yīng)的層級(jí)權(quán)重也會(huì)遞增，例如# id .class的權(quán)重為0.1.1.0。

2、CSS的引入方式有哪些？ink和@ import的區(qū)別是什么？

CSS有3種引入方式。

• 行內(nèi)式是指將樣式寫(xiě)在元素的 style屬性內(nèi)。

• 內(nèi)嵌式是指將樣式寫(xiě)在 style元素內(nèi)。

• 外鏈?zhǔn)绞侵竿ㄟ^(guò)link標(biāo)簽，引入CSS文件內(nèi)的樣式。

通過(guò)link標(biāo)簽引入樣式與通過(guò)@ import方法引入樣式有如下區(qū)別。

（1）加載資源的限制。

link是 XHTML的標(biāo)簽，除了加載CSS文件外，還可以加載RSS等其他事務(wù)，如加載模板等。

@ import只能加載CSS文件。

（2）加載方式。

如果用link引用CSS，在頁(yè)面載入時(shí)同時(shí)加載，即同步加載。

如果用@ import引用CSS，則需要等到網(wǎng)頁(yè)完全載入后，再加載CSS文件，即異步加載。

（3）兼容性。

link是 XHTML的標(biāo)簽，沒(méi)有兼容問(wèn)題。

@ import是在CSS2.1中提出的，不支持低版本的瀏覽器。

（4）改變樣式

link的標(biāo)簽是DOM元素，支持使用 JavaScript控制DOM和修改樣式；@ import是種方法，不支持控制DOM和修改樣式。

3、浮動(dòng)元素引起的問(wèn)題和解決方法是什么？

引起的問(wèn)題有如下幾個(gè)。

（1）父元素的高度無(wú)法被撐開(kāi)，影響與父元素同級(jí)的元素。

（2）與元素同級(jí)的非浮動(dòng)元素會(huì)緊隨其后（類(lèi)似遮蓋現(xiàn)象）。

（3）如果一個(gè)元素浮動(dòng)，則該元素之前的元素也需要浮動(dòng)；否則，會(huì)影響頁(yè)面顯示的結(jié)構(gòu)（即通常所說(shuō)的串行現(xiàn)象）。

解決方法如下：

（1）為父元素設(shè)置固定高度。

（2）為父元素設(shè)置 overflow:hidden即可清除浮動(dòng)，讓父元素的高度被撐開(kāi)。

（3）用 clear:both樣式屬性清除元素浮動(dòng)。

注意：如果只有左浮動(dòng)或只有右浮動(dòng)，可以單獨(dú)設(shè)置 clear:left或 clear:right，但是設(shè)置clear:both則都可以解決，所以此方法在工作中用得更多。

（4）外墻法是指在父元素外面，添加“一道墻”，設(shè)置屬性 clear:both

（5）內(nèi)墻法是指在父元素內(nèi)部，浮動(dòng)元素的最后面，添加“一道墻”，設(shè)置屬性 clear:both

（6）偽元素是指為了少創(chuàng)建元素，對(duì)父元素添加afer偽元素，設(shè)置屬性 content：""；display ：block；clear:both。

注意：這里所說(shuō)的少創(chuàng)建元素，實(shí)際上并沒(méi)有少創(chuàng)建，添加的偽元素也是元素，只不過(guò)沒(méi)有寫(xiě)在HTML文檔中而已。

（7）使用通用類(lèi) clearfix, clearfix的實(shí)現(xiàn)如下：

clearfix:after {? content " "；display:block;clear:both;}

注意：推薦以上這種方式，因?yàn)?clearfix已經(jīng)應(yīng)用在各大CSS框架（如 Bootstrap等）中，并成為行業(yè)的默認(rèn)規(guī)范。

4、position的值分別是相對(duì)于哪個(gè)位置定位的？

relative表示相對(duì)定位，相對(duì)于自己本身所在正常文檔流中的位置進(jìn)行定位。absolute表示絕對(duì)定位，相對(duì)于最近一級(jí)（從直接父級(jí)元素往上數(shù)，直到根元素）定位，相對(duì)于 statIc的父元素進(jìn)行定位。

fixed用于生成絕對(duì)定位，相對(duì)于瀏覽器窗口或 frame進(jìn)行定位。

statIc是默認(rèn)值，沒(méi)有定位，元素出現(xiàn)在正常的文檔流中。

sticky是生成黏性定位的元素，容器的位置根據(jù)正常文檔流計(jì)算得出。

注意：CSS3的新增屬性有點(diǎn)類(lèi)似于 relative與 fixed的結(jié)合體。如果目標(biāo)區(qū)域在屏幕中可見(jiàn)，表現(xiàn)為 relative；如果目標(biāo)區(qū)域在屏幕中不可見(jiàn)，表現(xiàn)為fixed。

5、請(qǐng)說(shuō)明 position:absolute和float屬性的異同。

共同點(diǎn)是對(duì)內(nèi)聯(lián)元素設(shè)置float和 absolute屬性，可以讓元素脫離文檔流，并且可以設(shè)置其寬高。

不同點(diǎn)是float仍可占據(jù)位置，不會(huì)覆蓋在另一個(gè)BFC區(qū)域上，浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹?#xff0c; absolute會(huì)覆蓋文檔流中的其他元素，即遮蓋現(xiàn)象。

6、CSS選擇器（符）有哪些？

（1）id選擇器（#myld）。

（2）類(lèi)選擇器（ .my ClassName）。

（3）標(biāo)簽選擇器（div,p,h1）

（4）相鄰選擇器（h1+p）

（5）子選擇器（ul>li）

（6）后代選擇器（li? a）

（7）通配符選擇器（*）

（8）屬性選擇器（ button[disabled="true"]）。

（9）偽類(lèi)選擇器（ a:hover、 li:nth- child）表示一種狀態(tài)。

（10）偽元素選擇器（li:before、“：after”、“：first- letter”、“：first-line”、“；selecton”）表示文檔某個(gè)部分的表現(xiàn)。

注意：在CSS3規(guī)范中，為了區(qū)別偽元素和偽類(lèi)，CSS3建議偽類(lèi)用單冒號(hào)“："，偽元素用雙冒號(hào)"：："。

7、CSS的哪些樣式可以繼承？哪些不可以繼承？

可繼承的樣式有font- size font-family color, UL LI DL DD DT。

不可繼承的樣式有 border、 padding, margin, width、 height。

注意：為了方便辨識(shí)，與字體相關(guān)的樣式通?？梢岳^承，與尺寸相關(guān)的樣式通常不能繼承。

8、CSS優(yōu)先級(jí)如何排序？

優(yōu)先級(jí)如下:

！important>style（內(nèi)聯(lián)）>ld（權(quán)重100）> class（權(quán)重10）>標(biāo)簽（權(quán)重1）。同類(lèi)別的樣式中，后面的會(huì)覆蓋前面的。

9、HTML是什么？CSS是什么？JavaScript是什么？

（1）HTML（ Hyper Text Markup Language，超文本標(biāo)記語(yǔ)言）是做網(wǎng)站時(shí)使用的些文本標(biāo)記標(biāo)簽，比如div、span等

（2）CSS（ Cascading Style Sheet，層疊樣式表）是做網(wǎng)站時(shí)為美化網(wǎng)站而為標(biāo)簽添加的樣式，比如 background（背景）、 color（字體顏色） height（高度）、widh（寬度）等。

（3） JavaScript是網(wǎng)站中實(shí)現(xiàn)前后臺(tái)交互效果、網(wǎng)頁(yè)動(dòng)畫(huà)效果的一種開(kāi)發(fā)語(yǔ)言，比如鼠標(biāo)單擊（ click）事件、前后臺(tái)數(shù)據(jù)請(qǐng)求（Ajax）等。

10、為什么要初始化CSS？

因?yàn)闉g覽器的兼容問(wèn)題，不同瀏覽器對(duì)有些標(biāo)簽的默認(rèn)值是不同的，如果沒(méi)有初始化CSS，往往會(huì)導(dǎo)致頁(yè)面在不同瀏覽器之間出現(xiàn)差異。

當(dāng)然，初始化樣式有時(shí)會(huì)對(duì)SEO產(chǎn)生一定的影響，但魚(yú)和熊掌不可兼得，所以在力求影響最小的情況下初始化CSS。

最簡(jiǎn)單的初始化方法就是：*{ padding：0；margin：0；}

11、如何居中div？如何居中一個(gè)浮動(dòng)元素？

確定容器的寬高，例如寬400px、高200px的div.設(shè)置層的外邊距。

div { float:left； width：400px； height：200px； margin：-100px 0 0-200px； /*注意，由于左上外邊距優(yōu)先級(jí)高于右下外邊距優(yōu)先級(jí)，因此，還可以簡(jiǎn)化設(shè)置 margin：-150px-250px；*/ position:relative；left：50%；top：50%； /*為方便看效果，添加一種背景色*/ background-color:pink }

12、構(gòu)成CSS的基本語(yǔ)句是什么？

構(gòu)成CSS的基本語(yǔ)句如下。

選擇器{屬性名稱1：屬性值1；屬性名稱2：屬性值2；}

例如

div{ margin-top：20px；border：2px solid #red；}

13、display有哪些值？說(shuō)明它們的作用。

display的值有 block、none, inline、 inline- block、list-item、 table和 inherit。其作用如下。

block是指塊類(lèi)型。默認(rèn)寬度為父元素寬度，可設(shè)置寬高，換行顯示。? ?none是指元素不會(huì)顯示，已脫離文檔流。

inline是指行內(nèi)元素類(lèi)型。默認(rèn)寬度為內(nèi)容寬度，不可設(shè)置寬高，同行顯示。

inline- block是指默認(rèn)寬度為內(nèi)容寬度，可以設(shè)置寬高，同行顯示。

list-item是指像塊類(lèi)型元素一樣顯示，并添加樣式列表標(biāo)記。

注意：例如，用div模擬li元素<ul>< div style=" display:list-item：">有課前端網(wǎng)</d></ul>。

table是指此元素會(huì)作為塊級(jí)表格顯示。

inherit是指從父元素繼承 display屬性的值。

14、簡(jiǎn)要描述塊級(jí)元素和行內(nèi)元素的區(qū)別。

塊級(jí)元素的前后都會(huì)自動(dòng)換行。默認(rèn)情況下，塊級(jí)元素會(huì)獨(dú)占一行。例如<p><h1-h6><div>都是塊級(jí)元素，當(dāng)顯示這些元素中間的文本時(shí)，都將從新行中開(kāi)始顯示，其后的內(nèi)容也將在新行中顯示。

行內(nèi)元素可以和其他行內(nèi)元素位于同一行，在瀏覽器中顯示時(shí)不會(huì)換行。例如<a><span>等，對(duì)于行內(nèi)元素，不能設(shè)置其高度和寬度。

還有一種元素是行內(nèi)塊級(jí)元素，比如<img>< input>元素等。這些元素可以和其他行內(nèi)元素位于同一行，同時(shí)可以設(shè)置其高度和寬度。

15、如何用DIV+CSS實(shí)現(xiàn)3欄布局（左右固定200pX，中間自適應(yīng)）？

具體代碼如下：

html

<div?class="container"> <div?class="main"> <h2>有課前端網(wǎng)</h2> </div> <div?class="left">左邊內(nèi)容</div> <?div?class="right" >右邊內(nèi)容</div> </dv>

CSS?

.container div {height：200px；} .container{ padding：0 200px；} .main,.left,.right{position:relative；float:left；} .left.right{width：200px；} .main{ width：100%；background:yellow；} .left {background:blue：margin-left：-100%；left：-200px；} .right {background:green；margin-left：-200px；left：200px；}

16、解釋浮動(dòng)及其工作原理。

浮動(dòng)的元素可以向左或向右移動(dòng)，直到它的外邊緣碰到包含元素（父元素）或另一個(gè)浮動(dòng)元素的邊框?yàn)橹?。要想使元素浮?dòng)，必須為元素設(shè)置一個(gè)寬度（ width）。雖然浮動(dòng)元素已不在文檔流中，但是它浮動(dòng)后所處的位置依然在浮動(dòng)之前的水平方向上。

因?yàn)楦?dòng)元素不在文檔流中，所以文檔流中的塊元素表現(xiàn)得就像浮動(dòng)元素不存在一樣，下面的元素會(huì)填補(bǔ)原來(lái)的位置。

有些元素會(huì)在浮動(dòng)元素的下方，但是這些元素的內(nèi)容并不一定會(huì)被浮動(dòng)的元素遮蓋。當(dāng)定位內(nèi)聯(lián)元素時(shí)，要考慮浮動(dòng)元素的邊界，圍繞浮動(dòng)元素放置內(nèi)聯(lián)元素。也可以把浮動(dòng)元素想象成被塊元素忽略的元素，而內(nèi)聯(lián)元素會(huì)關(guān)注的元素。

17、解釋一下 CSS Sprite，以及如何在頁(yè)面或網(wǎng)站中使用它。

CSS Sprite其實(shí)就是把網(wǎng)頁(yè)中一些背景圖片整合到一張圖片文件中，再利用CSS的“ background- image"“ background- repeat”“ background- position”的組合進(jìn)行背景定位， background- position可以用數(shù)字精確地定位出背景圖片的位置。

注意：在高級(jí)瀏覽器中，可以基于圖片的bose64編碼存儲(chǔ)，將圖片與其他類(lèi)型的文件打包。

18、在書(shū)寫(xiě)高效CSS時(shí)有哪些問(wèn)題需要考慮？

（1）樣式，從右向左解析一個(gè)選擇器

（2）類(lèi)型選擇器的速度，ID選擇器最快， Universal（通配符*）最慢。對(duì)于常用的4種類(lèi)型選擇器，解析速度由快到慢依次是ID、 class, tag和 universal。

（3）不要用標(biāo)簽限制ID選擇器（如：ul#main- navigation{}，ID已經(jīng)是唯一的，不需要Tag來(lái)限制，這樣做會(huì)讓選擇器變慢）。

（4）后代選擇器最糟糕（換句話說(shuō)， html body ul li a{}這個(gè)選擇器是很低效的）。

（5）想清楚你的需求，再去書(shū)寫(xiě)選擇器。

（6）CSS3選擇器（如nth- child）能夠漂亮地定位我們想要的元素，又能保證CSS整潔易讀。然而，這些神奇的選擇器會(huì)浪費(fèi)很多的瀏覽器資源。

（7）我們知道ID選擇器的速度最快，但是如果都用ID選擇器，會(huì)降低代碼的可讀性和可維護(hù)性等。在大型項(xiàng)目中，相對(duì)于使用ID選擇器提升速度，代碼的可讀性和可維護(hù)性帶來(lái)的收益更大。

19、說(shuō)出幾種解決IE6 ?Bug的方法。

解決方案如下：

（1）雙邊距問(wèn)題，是使用fLoat引起的。

解決方法是使用 display:inline。

（2）3像素問(wèn)題，是使用float引起的。

解決方法是使用 margin- right：-3px。

（3）超鏈接 hover偽類(lèi)樣式，單擊后失效。

解決方法是使用以下正確的書(shū)寫(xiě)順序：L→V→H→A（link, visited, hover.， active）。

（4）z- index問(wèn)題。

解決方法是給父級(jí)添加 position：relative

（5）PNG圖片半透明問(wèn)題。

解決方法是使用 JavaScript代碼庫(kù)，或使用IE濾鏡

注意：在使用E濾鏡解決PNG圖片透明度的時(shí)候，在1E6中，會(huì)對(duì)事件產(chǎn)生影響。

20、頁(yè)面重構(gòu)怎樣操作？

編寫(xiě)CSS，讓頁(yè)面結(jié)構(gòu)更合理化，提升用戶體驗(yàn)，達(dá)到良好的頁(yè)面效果并提升性能

21、display:none和 visibility:hidden的區(qū)別是什么？

display:none隱藏對(duì)應(yīng)的元素，在文檔流中不再給它分配空間，它各邊的元素會(huì)合攏，即脫離文檔流。

visibility:hidden隱藏對(duì)應(yīng)的元素，但是在文檔流中仍保留原來(lái)的空間。

22、內(nèi)聯(lián)元素可以實(shí)現(xiàn)浮動(dòng)嗎？

在CSS中，任何元素都可以浮動(dòng)。不論浮動(dòng)元素本身是何種元素，都會(huì)生成個(gè)塊級(jí)框。因此，對(duì)于內(nèi)聯(lián)元素，如果設(shè)置為浮動(dòng)，會(huì)產(chǎn)生和塊級(jí)框相同的效果。

23、簡(jiǎn)要描述CSS中 content屬性的作用。

content屬性與：before及：after偽元素配合使用，用來(lái)插入生成的內(nèi)容，可以在元素之前或之后放置生成的內(nèi)容。可以插入文本、圖像、引號(hào)，并可以結(jié)合計(jì)數(shù)器，為頁(yè)面元素插入編號(hào)。比如，查看如下代碼。

body{ counter-reset:chapter； }h1:before{content："第" counter（ chapter）"章" } h1{ counter-increment:chapter： } <h1></h1> <h1></h1> <h1></h1>

使用 content屬性，并結(jié)合 :before選擇器和計(jì)數(shù)器 counter，可以在每個(gè)<h1>元素前插入新的內(nèi)容。

24、如何定義高度很小的容器？

因?yàn)橛幸粋€(gè)默認(rèn)的行高，所以在IE6下無(wú)法定義小高度的容器。

兩種解決方案分別是 overflow:hidden或font-size：容器高度px

25、如何在圖片下方設(shè)置幾像素的空白間隙？

定義img為 display:block，或定義父容器為font-size：0。

26、如何解決IE6雙倍 margin的Bug？

使用 display:inline

27、如何讓超出寬度的文字顯示為省略號(hào)？

輸入 overflow:hidden；width:xxx；white-space:nowrap；?

text-overflow:ellipsis。

28、如何使英文單詞發(fā)生詞內(nèi)斷行？

輸入word-wrap:break-word。

29、如何實(shí)現(xiàn)IE6下的 position:fxed？

具體代碼如下：

html_{overflow:hidden；}body_{overflow:auto；height：100%：} .fixed{position:fixed； _position:absolute； left:0； top:0； padding：10px； background：#000； }

30、如何讓min- height兼容IE6？

具體代碼如下。

.min-height{ min-height：100px； _height：100px； background：red； }

31、已知高度的容器如何在頁(yè)面中水平垂直居中？

具體代碼如下。

<style type=text/css"> # box { width：200px； height：200px； background:red； position:absolute； left：50%； top:50%; margin：-100px 0 0-100px； /*或者 marion：-100px*/ } </style> <div id="box“></div>

32、px和em的區(qū)別是什么？

px和em都是長(zhǎng)度單位，兩者的區(qū)別是：px的值是固定的，指定為多少就是多少，計(jì)算比較容易；em的值不是國(guó)定的，是相對(duì)于容器字體的大小，并且em會(huì)繼承父級(jí)元素的字體大小。

瀏覽器的默認(rèn)字體高都是16px，所以未經(jīng)調(diào)整的瀏覽器都符合lem=16px，那么12px=0.75em，10px=0.625em。

與cm對(duì)應(yīng)的另一個(gè)長(zhǎng)度單位是rem，是指相對(duì)于根元素（通常是HTML元素）字體的大小。

33、什么叫優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)？兩者有什么區(qū)別？

優(yōu)雅降級(jí) graceful degradation是指一開(kāi)始就構(gòu)建完整的功能，然后再針對(duì)低版本瀏覽器進(jìn)行兼容。

漸進(jìn)增強(qiáng) progressive enhancement是指針對(duì)低版本瀏覽器構(gòu)建頁(yè)面，保證最基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)并追加功能，以達(dá)到更好的用戶體驗(yàn)。

兩者的區(qū)別如下。

（1）優(yōu)雅降級(jí)從復(fù)雜的現(xiàn)狀開(kāi)始，并試圖減少用戶體驗(yàn)的供給。

（2）漸進(jìn)增強(qiáng)則從一個(gè)非?；A(chǔ)并且能夠起作用的版本開(kāi)始，并不斷擴(kuò)充，以適應(yīng)未來(lái)環(huán)境的需要。

（3）降級(jí)（功能衰減）意味著往回看，而漸進(jìn)增強(qiáng)則意味著朝前看，同時(shí)保誣其根基處于安全地帶。

34、網(wǎng)頁(yè)制作會(huì)用到哪些圖片格式？

用于網(wǎng)頁(yè)制作的主流圖像格式有JPG、PNG、GIF等。

JPG：壓縮率高，文件小，最常用。

PNG：支持無(wú)損壓縮，色彩損失小，保真度高，文件稍大。

GIF：支持動(dòng)畫(huà)顯示，但只支持256色顯示，目前已經(jīng)被Fash大量取代。

35、CSS的 content屬性有什么作用？有什么應(yīng)用？

CSS的 content屬性專門(mén)應(yīng)用在 before/after偽元素上，用于插入生成的內(nèi)容最常見(jiàn)的應(yīng)用是利用偽類(lèi)清除浮動(dòng)。

36、對(duì)行內(nèi)元素設(shè)置 margin-top和 margin- bottom是否起作用？

不起作用（需要注意行內(nèi)元素的替換元素img、 Input，它們是行內(nèi)元素，但是可以設(shè)置它們的寬度和高度，并且 margin屬性也對(duì)它們起作用， margin-op和 margin- botton有著類(lèi)似于 inline- block的行為）

37、div+css的布局較table布局有什么優(yōu)點(diǎn)？

（1）改版的時(shí)候更方便，只須改動(dòng)CSS文件。

（2）頁(yè)面加載速度更快、結(jié)構(gòu)清晰、頁(yè)面簡(jiǎn)潔。

（3）表現(xiàn)與結(jié)構(gòu)分離。

（4）搜索引擎優(yōu)化（SEO）更友好，排名更靠前。

38、如果設(shè)置<p>的font-sze為10rem，那么當(dāng)用戶重置或拖曳瀏覽器窗口時(shí)，它的文本會(huì)不會(huì)受到影響？

不會(huì)

39、談?wù)勀銓?duì)BFC規(guī)范的理解。

BFC（ Block Formatting Context）指塊級(jí)格式化上下文，即一個(gè)創(chuàng)建了新的BFC的盒子是獨(dú)立布局的，盒子里面的子元素的樣式不會(huì)影響到外面的元素。在同一個(gè)BFC中，兩個(gè)毗鄰的塊級(jí)盒在垂直方向（和布局方向有關(guān)系）的 margin會(huì)發(fā)生折疊。

BFC決定元素如何對(duì)其內(nèi)容進(jìn)行布局，也決定與其他元素的關(guān)系和相互作用。

40、談?wù)勀銓?duì)C規(guī)范的理解。

IFC（ Inline Formatting Context）指內(nèi)聯(lián)格式化上下文，IFC的線框（ line box）高度由其包含行內(nèi)元素中最高的實(shí)際高度計(jì)算而來(lái)（不受豎直方向的 padding/margin的影響）。IFC中的線框一般左右都貼緊整個(gè)IFC，但是會(huì)被foat元素?cái)_亂。同一個(gè)IFC下的多個(gè)線框高度不同。

IFC中是不可能有塊級(jí)元素的，當(dāng)插入塊級(jí)元素時(shí)（如在p中插入div），會(huì)產(chǎn)生兩個(gè)匿名塊，兩者與div分隔開(kāi)，即產(chǎn)生兩個(gè)IFC，每個(gè)IFC對(duì)外表現(xiàn)為塊級(jí)元素，與div垂直排列。

41、談?wù)勀銓?duì)GFC規(guī)范的理解。

GFC（ GridLayout Formatting Context）指網(wǎng)格布局格式化上下文，即當(dāng)把一個(gè)的 display值設(shè)為grid的時(shí)候，此元素將會(huì)獲得一個(gè)獨(dú)立的渲染區(qū)域?？梢酝ㄟ^(guò)在網(wǎng)格容器（ grid container）上定義網(wǎng)格定義行（ grid definition row）和網(wǎng)格定義列（grid definition column），在網(wǎng)格項(xiàng)目（ grid item）上定義網(wǎng)格行（ grid row）和網(wǎng)格列（grid column）來(lái)為每一個(gè)網(wǎng)格項(xiàng)目定義位置和空間。

42、談?wù)勀銓?duì)FFC規(guī)范的理解。

FFC（ Flex Formatting Context）指自適應(yīng)格式化上下文，即 display值為fex或lne-flex的元素將會(huì)生成自適應(yīng)容器。伸縮容器中的每一個(gè)子元素都是一個(gè)伸縮單元。伸縮單元可以是任意數(shù)量的。伸縮單元內(nèi)和伸縮容器外的一切元素都不受影響。簡(jiǎn)單地說(shuō)， Flexbox定義了伸縮容器內(nèi)伸縮單元的布局。

43、訪問(wèn)超鏈接后 hover樣式就不出現(xiàn)的原因是什么？應(yīng)該如何解決？

因?yàn)樵L問(wèn)過(guò)的超鏈接樣式覆蓋了原有的 hover和 active偽類(lèi)選擇器樣式，解決方法是將CSS屬性的排列順序改為L(zhǎng)→V→H→A（link, visited, hover, active）。

44、什么是外邊距重疊？重疊的結(jié)果是什么？

外邊距重疊就是 margin- collapse在CSS中，相鄰的兩個(gè)盒子（可能是兄弟關(guān)系也可能是祖先關(guān)系）的外邊距可以結(jié)合成一個(gè)單獨(dú)的外邊距。這種合并外邊距的方式稱為折疊，因此而結(jié)合成的外邊距稱為折疊外邊距。

折疊結(jié)果遵循下列計(jì)算規(guī)則。

（1）當(dāng)兩個(gè)相鄰的外邊距都是正數(shù)時(shí)，折疊的結(jié)果是它們兩者中較大的值

（2）當(dāng)兩個(gè)相鄰的外邊距都是負(fù)數(shù)時(shí)，折疊的結(jié)果是兩者中絕對(duì)值較大的值。

（3）當(dāng)兩個(gè)外邊距一正一負(fù)時(shí)，折疊的結(jié)果是兩者相加的和。

45、rgba0和 opacity的透明效果有什么不同？

rgba()和 opacity都能實(shí)現(xiàn)透明效果，但它們最大的不同是 opacity作用于元素，并且可以設(shè)置元素內(nèi)所有內(nèi)容的透明度；而 rgba()只作用于元素的顏色或其背景色（設(shè)置rgba透明的元素的子元素不會(huì)繼承透明效果）。

46、CSS中可以讓文字在垂直和水平方向上重疊的兩個(gè)屬性是什么？

垂直方向的屬性是 line-height.水平方向的屬性是 letter-spacing。

47、你知道哪些關(guān)于 letter- spacing的妙用？

可以用于消除 inline- block元素間的換行符空格間隙

48、有什么方式可以對(duì)一個(gè)DOM設(shè)置它的CSS？

有以下三種方式。

• 外鏈?zhǔn)?#xff0c;即通過(guò)link標(biāo)簽引入一個(gè)外部CSS文件中。

• 內(nèi)嵌式，即將CSS代碼寫(xiě)在 style標(biāo)簽內(nèi)。

• 行內(nèi)式，即將CSS代碼寫(xiě)在元素的 style屬性中。

49、在CSS中可以通過(guò)哪些屬性定義，使得一個(gè)DOM元素不顯示在瀏覽器可視范圍內(nèi)？

最基本的方式如下。

設(shè)置 display屬性為none，或者設(shè)置 visibility屬性為 hidden技巧性的方式如下。

設(shè)置寬高為0，透明度為0，設(shè)置z- index位置為-1000。

50、常用的塊屬性標(biāo)簽及其特征有哪些？

常用塊標(biāo)簽有div、hl、h6、ol、ul、li、d、 table、p、br、form。塊標(biāo)簽的特征有獨(dú)占一行，換行顯示，可以設(shè)置寬、高，塊可以套塊和行。

51、常用的行內(nèi)屬性標(biāo)簽及其特征有哪些？

行標(biāo)簽有span、a、img、var、em, strong、 textarea、 select、 option、 input.行標(biāo)簽的特征有在行內(nèi)顯示，內(nèi)容撐開(kāi)寬、高，不可以設(shè)置寬、高（img, input、 textarea等除外），行只能套用行標(biāo)簽。

52、瀏覽器標(biāo)準(zhǔn)模式和怪異模式之間的區(qū)別是什么？

它們的區(qū)別是盒子模型的渲染模式不同。

可以使用 window. top document compatMode判斷當(dāng)前模式為何種模式結(jié)果為 Back Compat，表示怪異模式結(jié)果為 CSSICompat，表示標(biāo)準(zhǔn)模式。

53、如何避免文檔流中的空白符合并現(xiàn)象？

空白符合并是標(biāo)準(zhǔn)文檔流的特征之一，可以通過(guò)設(shè)置 white-spac修改這一特征，屬性值如下。

pre表示不會(huì)合并空白符，渲染換行符，不會(huì)自動(dòng)換行，相當(dāng)于pre元素。

pre-wrap表示不會(huì)合并空白符，渲染換行符，自動(dòng)換行pre-line表示合并空白符，渲染換行符，自動(dòng)換行。

nowrap表示合并空白符，不會(huì)渲染換行符，不會(huì)自動(dòng)換行。

normal表示默認(rèn)值，按照文檔流特點(diǎn)渲染，合并空白符，不會(huì)渲染換行符，自動(dòng)換行。

54、常見(jiàn)的兼容性問(wèn)題有哪些？

PNG24位的圖片在IE6瀏覽器上出現(xiàn)背景，解決方案是改成PNG8，也可以引段腳本進(jìn)行處理瀏覽器默認(rèn)的 margin和 padding不同。解決方案是用一個(gè)全局的*{ margin：0 padding：0；}來(lái)統(tǒng)一它們。

IE6雙邊距Bug是指在塊屬性標(biāo)簽float后又有橫行的 margin時(shí)，在IE6中顯示的margin比設(shè)置的大浮動(dòng)IE產(chǎn)生的雙倍距離（IE6的雙邊距問(wèn)題是指在IE6下，如果對(duì)元素設(shè)置了浮動(dòng)，同時(shí)又設(shè)置了 margin-left或 margin- right, margin的值會(huì)加倍）

#box{ float:left；width：10px；margin：00 100px；}

這種情況下IE會(huì)產(chǎn)生20px的距離，解決方案是在float的標(biāo)簽樣式控制中加入display:inline，將其轉(zhuǎn)換為行內(nèi)屬性（這個(gè)符號(hào)只會(huì)被IE6識(shí)別）。

用漸進(jìn)識(shí)別的方式，從總體中逐漸排除局部。

首先，巧妙地使用“\9”這一標(biāo)記，將IE瀏覽器從所有情況中分離出來(lái)。然后，再次使用“+”將IE8和I7、IE6分離開(kāi)，這樣IE8就能被獨(dú)立識(shí)別。

CSS

.bb{ background-color:#f1ee18；/所有識(shí)別*/ background- color：#00deff\9；/IE6、7、8識(shí)別”/ + background- color：#a200ff；/*E6、7識(shí)別*/ background- color：#1e0bdl；/"IE6識(shí)別”/ }

怪異模式問(wèn)題是指漏寫(xiě)DTD聲明， Firefox仍然會(huì)按照標(biāo)準(zhǔn)模式來(lái)解析網(wǎng)頁(yè)，但在IE中會(huì)觸發(fā)怪異模式。為避免怪異模式給我們帶來(lái)不必要的麻煩，最好養(yǎng)成書(shū)寫(xiě)DTD聲明的好習(xí)慣?，F(xiàn)在可以使用[hml5]

推薦的寫(xiě)法是'< doctype html>'上下 margin重合的問(wèn)題IE和FF中都存在，相鄰兩個(gè)div的 margIn-et和 margin- right不會(huì)重合，但是margin-top和 margin- bottom會(huì)重合。

解決方法是養(yǎng)成良好的代碼編寫(xiě)習(xí)慣，同時(shí)采用 margin-top或者同時(shí)采用 margin- bottom。

55、透明度具有繼承性，如何取消透明度的繼承？

使用rgba給元素的背景設(shè)置透明度的方式，來(lái)替代使用opacity設(shè)置元素透明度的方式，解決子元素繼承父元素透明度的問(wèn)題。

56、CSS中，自適應(yīng)的單位都有哪些？

自適應(yīng)的單位有以下幾個(gè)

• 百分比：%

• 相對(duì)于視口寬度的單位：ww

• 相對(duì)于視口高度的單位：vh

• 相對(duì)于視口寬度或者高度（取決于哪個(gè)小）的單位：Vm

• 相對(duì)于父元素字體大小的單位：em

• 相對(duì)于根元素字體大小的單位：rem

57、說(shuō)說(shuō)rem和em的區(qū)別。

它們都是相對(duì)單位

• rem表示相對(duì)于根元素的字體大小。

• em表示相對(duì)于父元素的字體大小

58、什么是FOUC？如何避免FOUC？

FOUC即無(wú)樣式內(nèi)容閃爍（ Flash Of Unstyled Content），是在IE下通過(guò) @import方式導(dǎo)入CSS文件引起的，如：< style type=" text/css" media="all"@ Dimporturl('demo.css）；</style>

IE會(huì)首先加載整個(gè)HTML文檔的DOM，然后再導(dǎo)入外部的CSS文件。因此，在頁(yè)面DOM加載完成到CSS導(dǎo)入完成中間，有一段時(shí)間頁(yè)面上的內(nèi)容是沒(méi)有樣式的，這段時(shí)間的長(zhǎng)短跟網(wǎng)速和電腦速度都有關(guān)系。

解決方法是在<head>之間加入一個(gè)<link>或< script>標(biāo)簽

59、說(shuō)說(shuō) display:none和 visibility:hidden的區(qū)別。

display:none隱藏對(duì)應(yīng)的元素，在文檔布局中不再給它分配空間，它各邊的元素會(huì)合攏，就當(dāng)它從來(lái)都不存在。

visibility:hidden隱藏對(duì)應(yīng)的元素，但是在文檔布局中仍保留原來(lái)的空間。

本文完~

總結(jié)

以上是生活随笔為你收集整理的【前端面试题】02—59道CSS面试题(附答案)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。