前端面試必備總結：CSS盒模型與BFC

想學習更多前段知識？苦於沒有人教？這都不是事！加入咱們的前段交流扣扣羣，解決你的一切疑惑，羣好：791038323

盒模型是css的基石，由什麼是css盒模型一個問題引出下面一系列的問題，深度逐漸遞增。

1.基本概念：標準模型+IE模型

2.標準模型和IE模型的區別

3.css如何設置這兩種模型

4.JS如何設置獲取盒模型對應的寬和高

5.根據盒模型解釋邊距重疊

6.BFC（邊距重疊解決方案）

1.什麼是css盒模型

css盒模型包括標準模型和IE模型。默認是標準模型

全部的HTML元素均可以看作盒子，css盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：

• 邊距(margin)
• 邊框(border)
• 填充(padding)
• 實際內容(content)

2.標準模型和IE模型的區別

 標準模型和IE模型的區別就是高度和寬度的計算方式不一樣。

 標準模型盒子的內容不包含其餘部分，而IE模型的內容部分包含了padding和border。因此標準模型盒子的寬度/高度指的就是content內容部分的寬度/高度，IE模型盒子的寬度/高度指的是包含width/height、padding、border的寬度/高度。 

在標準模式下的盒模型： 盒子實際內容（content）的width/height = 設置的width/height。 盒子總寬度/高度 = width/height+padding+border+margin。  

在IE模型下： 盒子實際內容（content）的width/height = 設置的width/height+padding+border。 盒子總寬度/高度 = width/height+padding+border+margin。

學習更多的知識，歡迎加入咋們的扣扣羣哈，羣豪：791038323

3.css如何設置這兩種模型

設置方法以下：

/*標準模型設置*/ 

box-sizing: content-box; 

/*IE模型設置*/

 box-sizing: border-box; 

4.JS如何設置獲取盒模型對應的寬和高

獲取寬和高有如下4鍾方法:

1.經過dom元素的stytle屬性獲取

dom.stytle.width/height; 

（dom指dom節點，好比使用getElementById()方式取都沒、節點）。

  侷限性：這種方法只能取出內聯方式設置的寬和高！！！

2.經過dom元素的currentStyle屬性獲取

dom.currentStyle.width/height; 

Element.currentStyle 是一個與 window.getComputedStyle()方法功能相同的屬性。這個屬性實如今舊版本的IE瀏覽器中。

侷限性：這個方法只適用於IE！！！

3.通用

window.getComputedStyle(dom).width/height; 

Window.getComputedStyle()方法返回一個對象，該對象在應用活動樣式表並解析這些值可能包含的任何基本計算後報告元素的全部CSS屬性的值。

優勢：該方法與上面第二個方法原理是相同的，可是兼容性比第二個方法好，Window.getComputedStyle()能夠兼容Chrome、火狐等多種瀏覽器！！！

4.經過獲取元素的絕對位置的方法

dom.getBoundingClientRect().width/height; 

Element.getBoundingClientRect()方法返回元素的大小及其相對於視口的位置。關於返回值下面是MDN的解釋。

面試的時候上面四種方法要能說出區別和哪一種方法的通用性較好。

5.根據盒模型解釋邊距重疊

上下邊距重疊時，只取較大值做爲margin值，水平方向也是如此。

爲了方便理解，這一部分使用代碼說明。

<style type="text/css"> 

 html *{

 padding: 0;

 margin: 0; 

 }

 #father { 

 background: green;

 }

 #son { 

 height: 100px; 

 background: pink;

 margin-top:10px;

 } 

</style> 

<section id="father">

   <article id="son">

     <p>我是子元素</p> 

     <p>我是子元素</p> 

     <p>我是子元素</p> 

   </article> 

</section> 

獲得的效果以下（實際父容器的背景顏色並未顯示）：

上圖可知子元素的高度是100px，而父元素的高度是多少呢？100px？110px？答案請看下圖。

爲何父元素高度是100px而不是110px呢，下面給父元素加上一個屬性以下：

#father { 

    background: green; 

    overflow: hidden; 

 }

此時父元素背景顯示出來，高度也變成110px，以下：

原理：給父元素添加overflow: hidden屬性實際就是給父元素建立了一個BFC，就是塊級格式化上下文（下面講）。

6.BFC（塊級格式化上下文）

1.BFC基本概念：

   塊級格式化上下文。與BFC對應的是IFC（不經常使用）。

   BFC很常見的應用就是邊距重疊解決。

2.BFC的原理

   BFC的原理就是BFC的渲染規則（能夠說出4點就能夠）。

   1.BFC 內部的子元素，在垂直方向，邊距會發生重疊。

   2.BFC的區域不會與浮動元素的box重疊，這個主要用於清除浮動帶來的影響。

   3.BFC在頁面中是一個獨立的容器，外面的元素不會影響裏面的元素，反過來裏面的元素也不 會影響外面的元素。

   4.計算BFC的高度時，浮動的子元素也會參與計算。  

3.如何建立BFC

  有以下4個方法能夠建立BFC。

  1.float屬性：float的屬性值不爲none。意思是，只要設置了float的值不是none，當前元素就建立了BFC。

  2.position屬性：只要position的值不是static或者relative，那麼就建立了一個BFC。好比設置position:fixed,position:absolute都是建立了BFC。

  3.display屬性：只要display屬性爲inline-block、table-cell,、table-caption, table、flex, inline-flex（與table相關的那幾個屬性）均可以建立BFC。

  4.overflow屬性：只要overflow屬性值不爲visible，均可以建立BFC，例如overflow:auto，overflow:hidden都可以建立BFC。【最爲經常使用】

4.BFC使用場景

  1.解決 margin 重疊
  2.清除浮動

  掃碼進羣更方便哦。

好啦，此次就講這麼多吧！想要學習的話歡迎進羣哦！

你能夠中止學習，但你的競爭對手不會。