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

盒模型是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。

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

設定方法如下：

/*标準模型設定*/
box-sizing: content-box;
/*IE模型設定*/
box-sizing: border-box;
           

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

擷取寬和高有以下4鐘方法:

1. 通過dom元素的stytle屬性擷取

   （dom指dom節點，比如使用

   getElementById()

   方式取都沒、節點）。

   局限性：這種方法隻能取出内聯方式設定的寬和高！！！

2. 通過dom元素的currentStyle屬性擷取

   Element.currentStyle

   是一個與

   window.getComputedStyle()

   方法功能相同的屬性。這個屬性實作在舊版本的IE浏覽器中。

   局限性：這個方法隻适用于IE！！！

3. 通用

   Window.getComputedStyle()

   方法傳回一個對象，該對象在應用活動樣式表并解析這些值可能包含的任何基本計算後報告元素的所有CSS屬性的值。

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

4. 通過擷取元素的絕對位置的方法

   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.清除浮動