59道CSS面試題(附答案)
CSS部分的面試題主要考察應(yīng)試者對CSS基礎(chǔ)概念模型的理解，例如文檔流、盒模型、浮動、定位、選擇器權(quán)重、樣式繼承等。很多應(yīng)試者認(rèn)為CSS很簡單，沒多少內(nèi)容，面試就是面試 JavaScript部分的內(nèi)容，這些觀點是錯誤的，面試的第一關(guān)往往會考察應(yīng)試者對CSS的掌握情況。因此，CSS也常常是應(yīng)試者掉入的第一個陷阱。
1、CSS有哪些基本選擇器？它們的權(quán)重是如何表示的？
CSS基本選擇器有類選擇器、屬性選擇器和ID選擇器。
CSS選擇器的權(quán)重預(yù)示著CSS選擇器樣式渲染的先后順序，元素樣式渲染時，權(quán)重高的選擇器樣式會覆蓋權(quán)重低的選擇器樣式。
通常將權(quán)重分為4個等級，可用0.0.0.0來表示這4個等級。
！important關(guān)鍵字優(yōu)先級最高。
注意：！importont井非選擇器，而是針對選擇器內(nèi)的單一樣式設(shè)置的。當(dāng)然，不同選擇器內(nèi)應(yīng)用 ！important的權(quán)重也是不一樣的，例如，在id選擇器內(nèi)的！important關(guān)鍵字權(quán)重要高于類選擇器內(nèi)的 ！important關(guān)鍵字權(quán)重，即下面所說的選擇器權(quán)重組合。
內(nèi)聯(lián)樣式（非元素器）的優(yōu)先級可看成1.0.0.0。
ID選擇器的優(yōu)先級為0.1.0.0。
類屬性選擇器、屬性選擇器、偽類的優(yōu)先級為0.0.1.0。
元素選擇器、偽元素選擇器的優(yōu)先級為0.0.0.1。
通配符選擇器對特殊性沒有任何貢獻值。
當(dāng)把選擇器組合使用的時候，相應(yīng)的層級權(quán)重也會遞增，例如# id .class的權(quán)重為0.1.1.0。
2、CSS的引入方式有哪些？ink和@ import的區(qū)別是什么？
CSS有3種引入方式。
行內(nèi)式是指將樣式寫在元素的 style屬性內(nèi)。
內(nèi)嵌式是指將樣式寫在 style元素內(nèi)。
外鏈?zhǔn)绞侵竿ㄟ^link標(biāo)簽，引入CSS文件內(nèi)的樣式。
通過link標(biāo)簽引入樣式與通過@ import方法引入樣式有如下區(qū)別。
（1）加載資源的限制。
link是 XHTML的標(biāo)簽，除了加載CSS文件外，還可以加載RSS等其他事務(wù)，如加載模板等。
@ import只能加載CSS文件。
（2）加載方式。
如果用link引用CSS，在頁面載入時同時加載，即同步加載。
如果用@ import引用CSS，則需要等到網(wǎng)頁完全載入后，再加載CSS文件，即異步加載。
（3）兼容性。
link是 XHTML的標(biāo)簽，沒有兼容問題。
@ import是在CSS2.1中提出的，不支持低版本的瀏覽器。
（4）改變樣式
link的標(biāo)簽是DOM元素，支持使用 JavaScript控制DOM和修改樣式；@ import是種方法，不支持控制DOM和修改樣式。
3、浮動元素引起的問題和解決方法是什么？
引起的問題有如下幾個。
（1）父元素的高度無法被撐開，影響與父元素同級的元素。
（2）與元素同級的非浮動元素會緊隨其后（類似遮蓋現(xiàn)象）。
（3）如果一個元素浮動，則該元素之前的元素也需要浮動；否則，會影響頁面顯示的結(jié)構(gòu)（即通常所說的串行現(xiàn)象）。
解決方法如下：
（1）為父元素設(shè)置固定高度。
（2）為父元素設(shè)置 overflow:hidden即可清除浮動，讓父元素的高度被撐開。
（3）用 clear:both樣式屬性清除元素浮動。
注意：如果只有左浮動或只有右浮動，可以單獨設(shè)置 clear:left或 clear:right，但是設(shè)置clear:both則都可以解決，所以此方法在工作中用得更多。
（4）外墻法是指在父元素外面，添加“一道墻”，設(shè)置屬性 clear:both
（5）內(nèi)墻法是指在父元素內(nèi)部，浮動元素的最后面，添加“一道墻”，設(shè)置屬性 clear:both
（6）偽元素是指為了少創(chuàng)建元素，對父元素添加afer偽元素，設(shè)置屬性 content：""；display ：block；clear:both。
注意：這里所說的少創(chuàng)建元素，實際上并沒有少創(chuàng)建，添加的偽元素也是元素，只不過沒有寫在HTML文檔中而已。
（7）使用通用類 clearfix, clearfix的實現(xiàn)如下：
clearfix:after { content " "；display:block;clear:both;}
div{float:left；width：400px；height：200px；margin：-100px 0 0-200px；/*注意，由于左上外邊距優(yōu)先級高于右下外邊距優(yōu)先級，因此，還可以簡化設(shè)置 margin：-150px-250px；*/position:relative；left：50%；top：50%；/*為方便看效果，添加一種背景色*/background-color:pink}
選擇器{屬性名稱1：屬性值1；屬性名稱2：屬性值2；}
div{margin-top：20px；border：2px solid #red；}
<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；}
23、簡要描述CSS中 content屬性的作用。
content屬性與：before及：after偽元素配合使用，用來插入生成的內(nèi)容，可以在元素之前或之后放置生成的內(nèi)容。可以插入文本、圖像、引號，并可以結(jié)合計數(shù)器，為頁面元素插入編號。比如，查看如下代碼。
body{counter-reset:chapter；}h1:before{content："第" counter（ chapter）"章"}h1{counter-increment:chapter：}<h1></h1><h1></h1><h1></h1>
使用 content屬性，并結(jié)合 :before選擇器和計數(shù)器 counter，可以在每個<h1>元素前插入新的內(nèi)容。
24、如何定義高度很小的容器？
因為有一個默認(rèn)的行高，所以在IE6下無法定義小高度的容器。
兩種解決方案分別是 overflow:hidden或font-size：容器高度px
25、如何在圖片下方設(shè)置幾像素的空白間隙？
定義img為 display:block，或定義父容器為font-size：0。
26、如何解決IE6雙倍 margin的Bug？
使用 display:inline
27、如何讓超出寬度的文字顯示為省略號？
輸入 overflow:hidden；width:xxx；white-space:nowrap；
text-overflow:ellipsis。
28、如何使英文單詞發(fā)生詞內(nèi)斷行？
輸入word-wrap:break-word。
29、如何實現(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、已知高度的容器如何在頁面中水平垂直居中？
具體代碼如下。
<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都是長度單位，兩者的區(qū)別是：px的值是固定的，指定為多少就是多少，計算比較容易；em的值不是國定的，是相對于容器字體的大小，并且em會繼承父級元素的字體大小。
瀏覽器的默認(rèn)字體高都是16px，所以未經(jīng)調(diào)整的瀏覽器都符合lem=16px，那么12px=0.75em，10px=0.625em。
與cm對應(yīng)的另一個長度單位是rem，是指相對于根元素（通常是HTML元素）字體的大小。
33、什么叫優(yōu)雅降級和漸進增強？兩者有什么區(qū)別？
優(yōu)雅降級 graceful degradation是指一開始就構(gòu)建完整的功能，然后再針對低版本瀏覽器進行兼容。
漸進增強 progressive enhancement是指針對低版本瀏覽器構(gòu)建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進并追加功能，以達(dá)到更好的用戶體驗。
兩者的區(qū)別如下。
（1）優(yōu)雅降級從復(fù)雜的現(xiàn)狀開始，并試圖減少用戶體驗的供給。
（2）漸進增強則從一個非常基礎(chǔ)并且能夠起作用的版本開始，并不斷擴充，以適應(yīng)未來環(huán)境的需要。
（3）降級（功能衰減）意味著往回看，而漸進增強則意味著朝前看，同時保誣其根基處于安全地帶。
34、網(wǎng)頁制作會用到哪些圖片格式？
用于網(wǎng)頁制作的主流圖像格式有JPG、PNG、GIF等。
JPG：壓縮率高，文件小，最常用。
PNG：支持無損壓縮，色彩損失小，保真度高，文件稍大。
GIF：支持動畫顯示，但只支持256色顯示，目前已經(jīng)被Fash大量取代。
35、CSS的 content屬性有什么作用？有什么應(yīng)用？
CSS的 content屬性專門應(yīng)用在 before/after偽元素上，用于插入生成的內(nèi)容最常見的應(yīng)用是利用偽類清除浮動。
36、對行內(nèi)元素設(shè)置 margin-top和 margin- bottom是否起作用？
不起作用（需要注意行內(nèi)元素的替換元素img、 Input，它們是行內(nèi)元素，但是可以設(shè)置它們的寬度和高度，并且 margin屬性也對它們起作用， margin-op和 margin- botton有著類似于 inline- block的行為）
37、div+css的布局較table布局有什么優(yōu)點？
（1）改版的時候更方便，只須改動CSS文件。
（2）頁面加載速度更快、結(jié)構(gòu)清晰、頁面簡潔。
（3）表現(xiàn)與結(jié)構(gòu)分離。
（4）搜索引擎優(yōu)化（SEO）更友好，排名更靠前。
38、如果設(shè)置<p>的font-sze為10rem，那么當(dāng)用戶重置或拖曳瀏覽器窗口時，它的文本會不會受到影響？
不會
39、談?wù)勀銓FC規(guī)范的理解。
BFC（ Block Formatting Context）指塊級格式化上下文，即一個創(chuàng)建了新的BFC的盒子是獨立布局的，盒子里面的子元素的樣式不會影響到外面的元素。在同一個BFC中，兩個毗鄰的塊級盒在垂直方向（和布局方向有關(guān)系）的 margin會發(fā)生折疊。
BFC決定元素如何對其內(nèi)容進行布局，也決定與其他元素的關(guān)系和相互作用。
40、談?wù)勀銓規(guī)范的理解。
IFC（ Inline Formatting Context）指內(nèi)聯(lián)格式化上下文，IFC的線框（ line box）高度由其包含行內(nèi)元素中最高的實際高度計算而來（不受豎直方向的 padding/margin的影響）。IFC中的線框一般左右都貼緊整個IFC，但是會被foat元素擾亂。同一個IFC下的多個線框高度不同。
IFC中是不可能有塊級元素的，當(dāng)插入塊級元素時（如在p中插入div），會產(chǎn)生兩個匿名塊，兩者與div分隔開，即產(chǎn)生兩個IFC，每個IFC對外表現(xiàn)為塊級元素，與div垂直排列。
41、談?wù)勀銓FC規(guī)范的理解。
GFC（ GridLayout Formatting Context）指網(wǎng)格布局格式化上下文，即當(dāng)把一個的 display值設(shè)為grid的時候，此元素將會獲得一個獨立的渲染區(qū)域。可以通過在網(wǎng)格容器（ grid container）上定義網(wǎng)格定義行（ grid definition row）和網(wǎng)格定義列（grid definition column），在網(wǎng)格項目（ grid item）上定義網(wǎng)格行（ grid row）和網(wǎng)格列（grid column）來為每一個網(wǎng)格項目定義位置和空間。
42、談?wù)勀銓FC規(guī)范的理解。
FFC（ Flex Formatting Context）指自適應(yīng)格式化上下文，即 display值為fex或lne-flex的元素將會生成自適應(yīng)容器。伸縮容器中的每一個子元素都是一個伸縮單元。伸縮單元可以是任意數(shù)量的。伸縮單元內(nèi)和伸縮容器外的一切元素都不受影響。簡單地說， Flexbox定義了伸縮容器內(nèi)伸縮單元的布局。
43、訪問超鏈接后 hover樣式就不出現(xiàn)的原因是什么？應(yīng)該如何解決？
因為訪問過的超鏈接樣式覆蓋了原有的 hover和 active偽類選擇器樣式，解決方法是將CSS屬性的排列順序改為L→V→H→A（link, visited, hover, active）。
44、什么是外邊距重疊？重疊的結(jié)果是什么？
外邊距重疊就是 margin- collapse在CSS中，相鄰的兩個盒子（可能是兄弟關(guān)系也可能是祖先關(guān)系）的外邊距可以結(jié)合成一個單獨的外邊距。這種合并外邊距的方式稱為折疊，因此而結(jié)合成的外邊距稱為折疊外邊距。
折疊結(jié)果遵循下列計算規(guī)則。
（1）當(dāng)兩個相鄰的外邊距都是正數(shù)時，折疊的結(jié)果是它們兩者中較大的值
（2）當(dāng)兩個相鄰的外邊距都是負(fù)數(shù)時，折疊的結(jié)果是兩者中絕對值較大的值。
（3）當(dāng)兩個外邊距一正一負(fù)時，折疊的結(jié)果是兩者相加的和。
45、rgba0和 opacity的透明效果有什么不同？
rgba()和 opacity都能實現(xiàn)透明效果，但它們最大的不同是 opacity作用于元素，并且可以設(shè)置元素內(nèi)所有內(nèi)容的透明度；而 rgba()只作用于元素的顏色或其背景色（設(shè)置rgba透明的元素的子元素不會繼承透明效果）。
46、CSS中可以讓文字在垂直和水平方向上重疊的兩個屬性是什么？
垂直方向的屬性是 line-height.水平方向的屬性是 letter-spacing。
47、你知道哪些關(guān)于 letter- spacing的妙用？
可以用于消除 inline- block元素間的換行符空格間隙
48、有什么方式可以對一個DOM設(shè)置它的CSS？
有以下三種方式。
外鏈?zhǔn)剑赐ㄟ^link標(biāo)簽引入一個外部CSS文件中。
內(nèi)嵌式，即將CSS代碼寫在 style標(biāo)簽內(nèi)。
行內(nèi)式，即將CSS代碼寫在元素的 style屬性中。
49、在CSS中可以通過哪些屬性定義，使得一個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)簽的特征有獨占一行，換行顯示，可以設(shè)置寬、高，塊可以套塊和行。
51、常用的行內(nèi)屬性標(biāo)簽及其特征有哪些？
行標(biāo)簽有span、a、img、var、em, strong、 textarea、 select、 option、 input.行標(biāo)簽的特征有在行內(nèi)顯示，內(nè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)文檔流的特征之一，可以通過設(shè)置 white-spac修改這一特征，屬性值如下。
pre表示不會合并空白符，渲染換行符，不會自動換行，相當(dāng)于pre元素。
pre-wrap表示不會合并空白符，渲染換行符，自動換行pre-line表示合并空白符，渲染換行符，自動換行。
nowrap表示合并空白符，不會渲染換行符，不會自動換行。
normal表示默認(rèn)值，按照文檔流特點渲染，合并空白符，不會渲染換行符，自動換行。
54、常見的兼容性問題有哪些？
PNG24位的圖片在IE6瀏覽器上出現(xiàn)背景，解決方案是改成PNG8，也可以引段腳本進行處理瀏覽器默認(rèn)的 margin和 padding不同。解決方案是用一個全局的*{ margin：0 padding：0；}來統(tǒng)一它們。
IE6雙邊距Bug是指在塊屬性標(biāo)簽float后又有橫行的 margin時，在IE6中顯示的margin比設(shè)置的大浮動IE產(chǎn)生的雙倍距離（IE6的雙邊距問題是指在IE6下，如果對元素設(shè)置了浮動，同時又設(shè)置了 margin-left或 margin- right, margin的值會加倍）
#box{ float:left；width：10px；margin：00 100px；}這種情況下IE會產(chǎn)生20px的距離，解決方案是在float的標(biāo)簽樣式控制中加入display:inline，將其轉(zhuǎn)換為行內(nèi)屬性（這個符號只會被IE6識別）。
用漸進識別的方式，從總體中逐漸排除局部。
首先，巧妙地使用“\9”這一標(biāo)記，將IE瀏覽器從所有情況中分離出來。然后，再次使用“+”將IE8和I7、IE6分離開，這樣IE8就能被獨立識別。
CSS
.bb{background-color:#f1ee18；/所有識別*/background- color：#00deff\9；/IE6、7、8識別”/+ background- color：#a200ff；/*E6、7識別*/background- color：#1e0bdl；/"IE6識別”/}
怪異模式問題是指漏寫DTD聲明， Firefox仍然會按照標(biāo)準(zhǔn)模式來解析網(wǎng)頁，但在IE中會觸發(fā)怪異模式。為避免怪異模式給我們帶來不必要的麻煩，最好養(yǎng)成書寫DTD聲明的好習(xí)慣。現(xiàn)在可以使用[hml5]
推薦的寫法是'< doctype html>'上下 margin重合的問題IE和FF中都存在，相鄰兩個div的 margIn-et和 margin- right不會重合，但是margin-top和 margin- bottom會重合。
解決方法是養(yǎng)成良好的代碼編寫習(xí)慣，同時采用 margin-top或者同時采用 margin- bottom。
55、透明度具有繼承性，如何取消透明度的繼承？
使用rgba給元素的背景設(shè)置透明度的方式，來替代使用opacity設(shè)置元素透明度的方式，解決子元素繼承父元素透明度的問題。
56、CSS中，自適應(yīng)的單位都有哪些？
自適應(yīng)的單位有以下幾個
百分比：%
相對于視口寬度的單位：ww
相對于視口高度的單位：vh
相對于視口寬度或者高度（取決于哪個小）的單位：Vm
相對于父元素字體大小的單位：em
相對于根元素字體大小的單位：rem
57、說說rem和em的區(qū)別。
它們都是相對單位
rem表示相對于根元素的字體大小。
em表示相對于父元素的字體大小
58、什么是FOUC？如何避免FOUC？
FOUC即無樣式內(nèi)容閃爍（ Flash Of Unstyled Content），是在IE下通過 @import方式導(dǎo)入CSS文件引起的，如：< style type=" text/css" media="all"@ Dimporturl('demo.css）；</style>
IE會首先加載整個HTML文檔的DOM，然后再導(dǎo)入外部的CSS文件。因此，在頁面DOM加載完成到CSS導(dǎo)入完成中間，有一段時間頁面上的內(nèi)容是沒有樣式的，這段時間的長短跟網(wǎng)速和電腦速度都有關(guān)系。
解決方法是在<head>之間加入一個<link>或< script>標(biāo)簽
59、說說 display:none和 visibility:hidden的區(qū)別。
display:none隱藏對應(yīng)的元素，在文檔布局中不再給它分配空間，它各邊的元素會合攏，就當(dāng)它從來都不存在。
visibility:hidden隱藏對應(yīng)的元素，但是在文檔布局中仍保留原來的空間。
本文完~
最后
歡迎加我微信(winty230)，拉你進技術(shù)群，長期交流學(xué)習(xí)...
歡迎關(guān)注「前端Q」,認(rèn)真學(xué)前端，做個專業(yè)的技術(shù)人...
