20道CSS基礎面試題

本文主要為大家分享一篇CSS基礎面試題，具有很好的參考價值，希望對大家有所協助。一起跟隨小編過來看看吧。

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

標準盒子模型：寬度=內容的寬度（content）+ border + padding + margin
低版本IE盒子模型：寬度=內容寬度（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選擇符：id選取器(#myid)、類別選取器(.myclassname)、標籤選取器(p, h1, p)、相鄰選取器(h1 + p)、子選取器（ul > li）、後代選取器（li a）、萬用字元選取器（*）、屬性選取器（a[rel=”external”]）、偽類別選取器（a:hover, li:nth-child）

可繼承的屬性：font-size, font-family, color

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

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

4 CSS優先順序演算法如何計算？

元素選擇符： 1
class選擇符： 10
id選擇符：100
元素標籤：1000

1. !important聲明的樣式優先順序最高，如果衝突再進行計算。

2. 如果優先順序相同，則選擇最後出現的樣式。

3. 繼承得到的樣式的優先順序最低。

5 CSS3新增偽類有那些?

p:first-of-type 選擇屬於其父元素的首個元素
p:last-of-type 選擇屬於其父元素的最後元素
p:only-of-type 選擇屬於其父元素唯一的元素
p:only-child 選擇屬於其父元素的唯一子項目
p:nth-child(2) 選擇屬於其父元素的第二個子項目
:enabled :disabled 表單控制項的禁用狀態。
:checked 單選框或複選框被選中。

6 如何置中p？如何置中一個浮動元素？如何讓絕對位置的p置中？

p：

border: 1px solid red;margin: 0 auto; height: 50px;width: 80px;

浮動元素的上下左右置中：

border: 1px solid red;float: left;position: absolute;width: 200px;height: 100px;left: 50%;top: 50%;margin: -50px 0 0 -100px;

絕對位置的左右置中：

border: 1px solid black;position: absolute;width: 200px;height: 100px;margin: 0 auto;left: 0;right: 0;

還有更加優雅的置中方式就是用flexbox，以後會做整理。

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

inline（預設）–內聯
none–隱藏
block–塊顯示
table–表格顯示
list-item–項目列表
inline-block

8 position的值？

static（預設）：按照正常文檔流進行排列；
relative（相對定位）：不脫離文檔流，參考自身靜態位置通過 top, bottom, left, right 定位；
absolute(絕對位置)：參考距其最近一個不為static的父級元素通過top, bottom, left, right 定位；
fixed(固定定位)：所固定的參照對像是可視視窗。

9 CSS3有哪些新特性？

1. RGBA和透明度

2. background-image background-origin(content-box/padding-box/border-box) background-size background-repeat

3. word-wrap（對長的不可分割單詞換行）word-wrap：break-word

4. 文字陰影：text-shadow： 5px 5px 5px #FF0000;（水平陰影，垂直陰影，模糊距離，陰影顏色）

5. font-face屬性：定義自己的字型

6. 圓角（邊框半徑）：border-radius 屬性用於建立圓角

7. 邊框圖片：border-image: url(border.png) 30 30 round

8. 盒陰影：box-shadow: 10px 10px 5px #888888

9. 媒體查詢：定義兩套css，當瀏覽器的尺寸變化時會採用不同的屬性

10 請解釋一下CSS3的flexbox（彈性盒布局模型）,以及適用情境？

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

11 用純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;

12 一個滿屏品字布局如何設計?

第一種真正的品字：

1. 三塊高寬是確定的；

2. 上面那塊用margin: 0 auto;置中；

3. 下面兩塊用float或者inline-block不換行；

4. 用margin調整位置使他們置中。

第二種全屏的品字布局:

上面的p設定成100%，下面的p分別寬50%，然後使用float或者inline使其不換行。

13 常見的相容性問題？

1. 不同瀏覽器的標籤預設的margin和padding不一樣。*{margin:0;padding:0;}

2. IE6雙邊距bug：塊屬性標籤float後，又有橫行的margin情況下，在IE6顯示margin比設定的大。hack：display:inline;將其轉化為行內屬性。

3. 漸進識別的方式，從總體中逐漸排除局部。首先，巧妙的使用“9”這一標記，將IE瀏覽器從所有情況中分離出來。接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。

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

5. 設定較小高度標籤（一般小於10px），在IE6，IE7中高度超出自己設定高度。hack：給超出高度的標籤設定overflow:hidden;或者設定行高line-height 小於你設定的高度。

6. IE下，可以使用擷取常規屬性的方法來擷取自訂屬性,也可以使用getAttribute()擷取自訂屬性；Firefox下，只能使用getAttribute()擷取自訂屬性。解決方案:統一通過getAttribute()擷取自訂屬性。

7. Chrome 中文介面下預設會將小於 12px 的文本強制按照 12px 顯示,可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。

8. 超連結訪問過後hover樣式就不出現了，被點擊瀏覽過的超連結樣式不再具有hover和active了。解決方案是改變CSS屬性的排列順序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}

14 為什麼要初始化CSS樣式

因為瀏覽器的相容問題，不同瀏覽器對有些標籤的預設值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。

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)

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

當一個元素的visibility屬性被設定成collapse值後，對於一般的元素，它的表現跟hidden是一樣的。

1. chrome中，使用collapse值和使用hidden沒有區別。

2. firefox，opera和IE，使用collapse值和使用display：none沒有什麼區別。

17 display:none與visibility：hidden的區別？

display：none 不顯示對應的元素，在文檔布局中不再分配空間（迴流+重繪）
visibility：hidden 隱藏對應元素，在文檔布局中仍保留原來的空間（重繪）

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

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

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

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

20 為什麼會出現浮動和什麼時候需要清除浮動？清除浮動的方式？

浮動元素碰到包含它的邊框或者浮動元素的邊框停留。由於浮動元素不在文檔流中，所以文檔流的塊框表現得就像浮動框不存在一樣。浮動元素會漂浮在文檔流的塊框上。
浮動帶來的問題：

1. 父元素的高度無法被撐開，影響與父元素同級的元素

2. 與浮動元素同級的非浮動元素（內嵌元素）會跟隨其後

3. 若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構。

清除浮動的方式：

1. 父級p定義height

2. 最後一個浮動元素後加空p標籤 並添加樣式clear:both。

3. 包含浮動元素的父標籤添加樣式overflow為hidden或auto。

4. 父級p定義zoom