2019 CSS經典面試題（史上最全）

這些是我自己在學習過程中總結的一些知識點，本篇文章我將以面試題的形式分享給大家，希望對大家有所幫助，本文篇幅較長，您若認真看完，並且反覆閱讀，我相信對您的學習或者是面試，都會有一定幫助，同時希望大家批評指正！

1. 介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什麼不同的？

盒子模型就是 元素在網頁中的實際佔位，有兩種：IE盒子模型和W3C盒子模型

標準(W3C)盒子模型：內容content、填充padding、邊界margin、邊框border

寬度=內容的寬度（content）+ border + padding + margin；

低版本IE盒子模型：IE的content部分把border和padding計算進去了

寬度=內容寬度（content+border+padding）+ margin

2. box-sizing屬性？

用來控制元素的盒子模型的解析模式，預設為content-box
context-box：W3C的標準盒子模型，設定元素的 height/width 屬性指的是content部分的高/寬
border-box：IE傳統盒子模型。設定元素的height/width屬性指的是border + padding + content部分的高/寬

3. CSS選擇器有哪些？哪些屬性可以繼承？CSS優先順序演算法如何計算？

CSS選擇符：

1. id選擇器（ # myid）

2. 類選擇器（.myclassname）

3. 標籤(元素)選擇器（div, h1, p）

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

5. 子選擇器（ul > li）

6. 後代選擇器（li a）

7. 萬用字元選擇器（ * ）

8. 屬性選擇器（a[rel = "external"]）

9. 偽類選擇器（a:hover, li:nth-child）

偽元素選擇器、分組選擇器。

繼承性：

可繼承的樣式：font-size, font-family, color，ul，li，dl，dt，dd；

不可繼承的樣式：border, padding, margin, width, height

優先順序（就近原則）：!important > [ id > class > tag ]
!important 比內聯優先順序高

優先順序演算法計算

優先順序就近原則，同權重情況下樣式定義最近者為準

!important>id >class>tag

important比內聯優先順序高

元素選擇符的權值：元素標籤（派生選擇器）：1，class選擇符：10，id選擇符：100，內聯樣式權值最大，為1000

1. !important宣告的樣式優先順序最高，如果衝突再進行計算。
2. 如果優先順序相同，則選擇最後出現的樣式。
3. 繼承得到的樣式的優先順序最低。

4. CSS3新增偽類有那些?

p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每個 <p> 元素。

p:last-of-type 選擇屬於其父元素的最後 <p> 元素的每個 <p> 元素。

p:only-of-type 選擇屬於其父元素唯一的 <p> 元素的每個 <p> 元素。

p:only-child 選擇屬於其父元素的唯一子元素的每個 <p> 元素。

p:nth-child(2) 選擇屬於其父元素的第二個子元素的每個 <p> 元素。

:enabled

:disabled 控制表單控制元件的禁用狀態。

:checked，單選框或核取方塊被選中。

:before在元素之前新增內容，也可以用來做清除浮動

:after在元素之後新增內容

5. 如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？如何居中一個img（position定位）

水平居中div：

border: 1px solid red;
margin: 0 auto; 
height: 50px;
width: 80px;複製程式碼

水平垂直居中一個浮動元素（position定位）

第一種：未知元素寬高

<div class="outer">
    <span>我想居中顯示</span>
</div>
<style>
    .outer{
        width:300px;
        height:300px;
        position:relative;
        background-color:#ccc;
    }
    span{
        float:left;
        position:absolute;
        backgroond-color:red;
        top:50%;
        left:50%;
        transform:translate(-50%,50%);
    }
</style>複製程式碼

第二種：已知元素寬高的

<div class="outer">
    <span>我想居中顯示</span>
</div>
<style>
    .outer{
        width:300px;
        height:300px;
        position:relative;
        background-color:#ccc;
    }
    span{
        float:left;
        position:absolute;
        backgroond-color:red;
        width:150px;
        height:50px;
        top:50%;
        left:50%;
        margin:-25px 0px 0px -75px;
    }
</style>複製程式碼

如何垂直居中一個img（display : table-cell 或者 position定位）

<div class="outer">        
    <img src="nz.jpg" alt="">    
</div>
<style>        
    .outer{            
        width: 300px;           
        height: 300px;            
        border: 1px solid #cccccc;            
        display: table-cell;            
        text-align: center;            
        vertical-align: middle;        
    }        
    img{            
        width: 150px;            
        height: 150px;        
    }    
</style>複製程式碼

絕對定位的div水平垂直居中：

border: 1px solid black;
position: absolute;
width: 200px;
height: 100px;
margin: auto;
left: 0;
right: 0; 
top:0;
bottom:0;複製程式碼

還有更加優雅的居中方式就是用 flexbox，點選產看 ，更多的 居中問題，請帶點選檢視

6. display 有哪些值？說明他們的作用?

7. position 的值？

8. CSS3有哪些新特性？

1. 新增各種CSS選擇器 （: not(.input)：所有 class 不是“input”的節點）
2. 圓角 （border-radius:8px）
3. 多列布局 （multi-column layout）
4. 陰影和反射 （Shadow/Reflect）
5. 文字特效 （text-shadow、）
6. 文字渲染 （Text-decoration）
7. 線性漸變 （gradient）
8. 旋轉 （transform）
9. 增加了旋轉，縮放，定位，傾斜，動畫，多背景 transform:scale(0.85,0.90) | translate(0px,-30px) | skew(-9deg,0deg) | Animation:
10. 媒體查詢，定義兩套css，當瀏覽器的尺寸變化時會採用不同的屬性

更多 CSS3 和 HTML5的新特性，請點選 CSS3 和 HTML5 新特性一覽

9. 請解釋一下 CSS3 的 flexbox（彈性盒佈局模型）,以及適用場景？

該佈局模型的目的是提供一種更加高效的方式來對容器中的條目進行佈局、對齊和分配空間。在傳統的佈局方式中，block 佈局是把塊在垂直方向從上到下依次排列的；而 inline 佈局則是在水平方向來排列。彈性盒佈局並沒有這樣內在的方向限制，可以由開發人員自由操作。
試用場景：彈性佈局適合於移動前端開發，在Android和ios上也完美支援。

關於 flex 佈局，更多請點選檢視

10. 用純CSS建立一個三角形的原理是什麼？

首先，需要把元素的寬度、高度設為0。然後設定邊框樣式。

width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;複製程式碼

11. 一個滿屏 品 字佈局如何設計?

第一種真正的品字：

1. 三塊高寬是確定的；
2. 上面那塊用margin: 0 auto;居中；
3. 下面兩塊用float或者inline-block不換行；
4. 用margin調整位置使他們居中。

第二種全屏的品字佈局:
上面的div設定成100%，下面的div分別寬50%，然後使用float或者inline使其不換行。

12. 常見的相容性問題？

1. 不同瀏覽器的標籤預設的margin和padding不一樣。解決辦法是加一個全域性的

   *{margin:0;padding:0;} 來統一；

2. IE6雙邊距bug：塊屬性標籤float後，又有橫行的margin情況下，在IE6顯示margin比設定的大。hack：display:inline; 將其轉化為行內屬性。漸進識別的方式，從總體中逐漸排除區域性。首先，巧妙的使用“9”這一標記，將IE瀏覽器從所有情況中分離出來。接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。 漸進識別的方式，從總體中逐漸排除區域性。首先，巧妙的使用“9”這一標記，將IE瀏覽器從所有情況中分離出來。接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。

   {
   background-color:#f1ee18;/*所有識別*/
   .background-color:#00deff\9; /*IE6、7、8識別*/
   +background-color:#a200ff;/*IE6、7識別*/
   _background-color:#1e0bd1;/*IE6識別*/
   }複製程式碼

3. 設定較小高度標籤（一般小於10px），在IE6，IE7中高度超出自己設定高度。hack：給超出高度的標籤設定overflow:hidden;或者設定行高line-height 小於你設定的高度。
4. IE下，可以使用獲取常規屬性的方法來獲取自定義屬性,也可以使用getAttribute()獲取自定義屬性；Firefox下，只能使用getAttribute()獲取自定義屬性。解決方法:統一通過getAttribute()獲取自定義屬性。
5. Chrome 中文介面下預設會將小於 12px 的文字強制按照 12px 顯示,可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。
6. 超連結訪問過後hover樣式就不出現了，因為被點選訪問過的超連結樣式不再具有hover和active了。解決方法是改變CSS屬性的排列順序:L-V-H-A :

   a:link {} 
   a:visited {} 
   a:hover {} 
   a:active {}複製程式碼

7. IE下,even物件有x,y屬性,但是沒有pageX,pageY屬性;

   Firefox下,event物件有pageX,pageY屬性,但是沒有x,y屬性。

   解決方法：（條件註釋）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。

8. png24位的圖片在iE6瀏覽器上出現背景，解決方案是做成PNG8.

13. 寫出幾種IE6 BUG的解決方法

1. 雙邊距BUG float引起的 使用display

2. 3畫素問題 使用float引起的 使用dislpay:inline -3px

3. 超連結hover 點選後失效 使用正確的書寫順序 link visited hover active

4. Ie z-index問題 給父級新增position:relative

5. Png 透明 使用js程式碼 改

6. Min-height 最小高度 !Important 解決’

7. select 在ie6下遮蓋 使用iframe巢狀

8. 為什麼沒有辦法定義1px左右的寬度容器(IE6預設的行高造成的，使用over:hidden,zoom:0.08 line-height:1px)

9. ie 6 不支援!important

14. 為什麼要初始化 CSS 樣式

因為瀏覽器的相容問題，不同瀏覽器對有些標籤的預設值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。當然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。

15. absolute 的 containing block(容器塊)計算方式跟正常流有什麼不同？

無論屬於哪種，都要先找到其祖先元素中最近的 position 值不為 static 的元素，然後再判斷：

1. 若此元素為 inline 元素，則 containing block 為能夠包含這個元素生成的第一個和最後一個 inline box 的 padding box (除 margin, border 外的區域) 的最小矩形；
2. 否則,則由這個祖先元素的 padding box 構成。

如果都找不到，則為 initial containing block。

補充：

1. static(預設的)/relative：簡單說就是它的父元素的內容框（即去掉padding的部分）

2. absolute: 向上找最近的定位為absolute/relative的元素

3. fixed: 它的containing block一律為根元素(html/body)，根元素也是initial containing block

16. CSS裡的 visibility 屬性有個 collapse 屬性值是幹嗎用的？在不同瀏覽器下以後什麼區別？

當一個元素的 visibility 屬性被設定成 collapse 值後，對於一般的元素，它的表現跟 hidden 是一樣的。但例外的是，如果這個元素是table相關的元素，例如table行，table group，table列，table column group，它的表現卻跟 display: none 一樣，也就是說，它們佔用的空間也會釋放。

在谷歌瀏覽器裡，使用 collapse 值和使用 hidden 值沒有什麼區別。

在火狐瀏覽器、Opera和IE11裡，使用 collapse 值的效果就如它的字面意思：table的行會消失，它的下面一行會補充它的位置。

17. display:none 與 visibility:hidden 的區別是什麼？

display : none 隱藏對應的元素，在文件佈局中不再分配空間（迴流+重繪）

visibility:hideen 隱藏對應的元素，在文件佈局中仍保留原來的空間（重繪）

使用 CSS display:none 屬性後，HTML 元素（物件）的寬度、高度等各種屬性值都將“丟失”;而使用 visibility:hidden 屬性後，HTML元素（物件）僅僅是在視覺上看不見（完全透明），而它所佔據的空間位置仍然存在。

18. position 跟 display、overflow、float 這些特性相互疊加後會怎麼樣？

display 屬性規定元素應該生成的框的型別；position屬性規定元素的定位型別；float屬性是一種佈局方式，定義元素在哪個方向浮動。
類似於優先順序機制：position：absolute/fixed優先順序最高，有他們在時，float不起作用，display值需要調整。float 或者absolute定位的元素，只能是塊元素或表格。

19. 對 BFC 規範(塊級格式化上下文：block formatting context)的理解？

（W3C CSS 2.1 規範中的一個概念,它是一個獨立容器，決定了元素如何對其內容進行定位,以及與其他元素的關係和相互作用。）

一個頁面是由很多個 Box 組成的,元素的型別和 display 屬性,決定了這個 Box 的型別。

不同型別的 Box，會參與不同的 Formatting Context（決定如何渲染文件的容器），因此Box內的元素會以不同的方式渲染，也就是說BFC內部的元素和外部的元素不會互相影響。

BFC 規定了內部的 Block Box 如何佈局。

定位方案：

1. 內部的 Box 會在垂直方向上一個接一個放置。
2. Box垂直方向的距離由margin決定，屬於同一個 BFC 的兩個相鄰 Box 的 margin 會發生重疊。
3. 每個元素的 margin box 的左邊，與包含塊 border box 的左邊相接觸。
4. BFC 的區域不會與 float box 重疊。
5. BFC 是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。
6. 計算 BFC 的高度時，浮動元素也會參與計算。

滿足下列條件之一就可觸發 BFC

1. 根元素，即 html
2. float 的值不為none（預設）
3. overflow 的值不為 visible（預設）
4. display 的值為 inline-block、table-cell、table-caption
5. position 的值為 absolute 或 fixed

更多關於 BFC 的介紹，請看我的文章 BFC 是什麼？有什麼用？

20. 為什麼會出現浮動? 什麼時候需要清除浮動？清除浮動有哪些方式？優缺點是什麼？你認為最好的是哪一種？為什麼？

出現浮動的原因：

浮動元素碰到包含它的邊框或者浮動元素的邊框停留。在CSS規範中，浮動定位不屬於正常的頁面流，而是獨立定位的，所以文件流的塊框表現得就像浮動框不存在一樣。浮動元素會漂浮在文件流的塊框上。

關於css的定位機制：普通流，浮動，絕對定位（position：fixed是position：absolute的一個子類）。浮動的框可以左右移動，直到它的外邊緣遇到包含框或者另一個浮動框的邊緣，所以才說浮動定位不屬於正常的頁面流。文件中的普通流就會表現得和浮動框不存在一樣，當浮動框高度超出包含框的時候，就會出現包含框不會自動伸縮高度類筆盒浮動元素。所以，只含有浮動元素的父容器在顯示時不需要考慮子元素的位置，就造成顯示父容器像空容器一樣。

浮動帶來的問題：

1. 父元素的高度無法被撐開，影響與父元素同級的元素
2. 與浮動元素同級的非浮動元素（內聯元素）會跟隨其後
3. 若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構。

清除浮動的方式：

1. 父級div定義height
2. 最後一個浮動元素後加空 div 標籤 並新增樣式 clear:both。（理論上能清除任何標籤，增加無意義的標籤）
3. 包含浮動元素的父標籤新增樣式 overflow 為 hidden 或 auto。
4. 父級 div 定義 zoom（空標籤元素清除浮動而不得不增加無意義程式碼的弊端，使用zoom:1用於相容IE）
5. 用after偽元素清除浮動（用於非IE瀏覽器）

1、父級div定義height

原理：父級div手動定義height，就解決了父級div無法自動獲取到高度的問題

優點：簡單，程式碼少，容易掌握

缺點：只適合高度固定的佈局，要給出精確的高度，如果高度和父級div不一樣時，會產生問題

建議：不推薦使用，只建議高度固定的佈局時使用

2、結尾處加空 div 標籤 clear:both

原理：新增一個空div，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度

優點：簡單，程式碼少，瀏覽器支援好，不容易出現怪問題

缺點：不少初學者不理解原理；如果頁面浮動佈局多，就要增加很多空div，讓人感覺很不爽

建議：不推薦使用，但此方法是以前主要使用的一種清除浮動方法

3、父級 div 定義 overflow:hidden

原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度

優點：簡單，程式碼少，瀏覽器支援好

缺點：不能和position配合使用，因為超出的尺寸的會被隱藏

建議：只推薦沒有使用position或對overflow:hidden理解比較深的朋友使用

4、父級div定義偽類 :after 和 zoom

原理：IE8以上和非IE瀏覽器才支援:after，原理和方法2有點類似，zoom(IE轉有屬性)可解決ie6,ie7浮動問題

優點：瀏覽器支援好，不容易出現怪問題（目前：大型網站都有使用，如：騰迅，網易，新浪等等）

缺點：程式碼多，不少初學者不理解原理，要兩句程式碼結合使用，才能讓主流瀏覽器都支援

建議：推薦使用，建議定義公共類，以減少CSS程式碼

(1) 在子元素後新增一個空div div{clear:both;}

(2) 在父元素中{overflow:hidden|auto;zoom:1}

(3) :after偽選擇符，在父容器的尾部自動建立一個子元素

.clearfix:after {
    content: "\0020";display: block;height: 0;clear: both;
}
.clearfix {
    zoom: 1;
}複製程式碼

"clearfix"是父容器的class名稱，"content:"020";"是在父容器的結尾處放一個空白符，

"height: 0;"是讓這個這個空白字元不顯示出來，"display: block; clear: both;"是確保這個空白字元是非浮動的獨立區塊。:after選擇符IE 6不支援,新增一條IE 6的獨有命令"zoom:1;"就行了.

21. 上下 margin 重合的問題

在重合元素外包裹一層容器，並觸發該容器生成一個BFC。例子：

<div class="aside"></div>
<div class="text">
    <div class="main"></div>
</div>
<!--下面是css程式碼-->
 .aside {
            margin-bottom: 100px;  
            width: 100px;
            height: 150px;
            background: #f66;
        }
        .main {
            margin-top: 100px;
            height: 200px;
            background: #fcc;
        }
         .text{
/*盒子main的外面包一個div，通過改變此div的屬性使兩個盒子分屬於兩個不同的BFC，以此來阻止margin重疊*/
            overflow: hidden;  //此時已經觸發了BFC屬性。
        }
複製程式碼

22. 設定元素浮動後，該元素的 display 值是多少？

自動變成display:block

23. 移動端的佈局用過媒體查詢嗎？

通過媒體查詢可以為不同大小和尺寸的媒體定義不同的css，適應相應的裝置的顯示。

1. <head>裡邊

   <link rel="stylesheet" type="text/css" href="xxx.css" media="only screen and (max-device-width:480px)">複製程式碼

2. CSS :

3. @media only screen and (max-device-width:480px) {
       /css樣式/}複製程式碼

<meta name=’viewport’ content=”width=device-width, initial-scale=1. maximum-scale=1,user-scalable=no”>
複製程式碼

p{
    font-size:10px;
    -webkit-transform:scale(0.8);//0.8是縮放比例
} 
複製程式碼

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
複製程式碼

:first-line 
:first-letter 
:before 
:after複製程式碼

 display : block複製程式碼

float ： left；複製程式碼

img{    
    border: 0;    
    vertical-align: bottom;
}複製程式碼

padding margin複製程式碼

padding : 0;
margin : 0;複製程式碼

list-style:none;
background-image:url()複製程式碼