---

關於css盒模型，由淺入深會連續追問，如下：

1. 盒模型的基本概念
2. 標準模型和IE模型的區別
3. CSS如何設定這兩種模型？
4. JS如何獲取盒模型對應的寬和高？
5. 範例題（根據盒模型解釋邊距重疊）
6. BFC（邊距重疊解決方案）

一、基本概念

• 首先由裡向外：content、padding、border、margin.
• 一般盒模型分為兩種模型：標準模型和IE模型
  • 
  • 
  • 兩種模型的差別就是width和height的定義標準的只含content，IE模型還包含padding和border。
  • 瀏覽器預設標準模型

二、兩種模型的設定

• 兩種模型的設定使用以下方式：

/* 標準模型 */
box-sizing:content-box;

 /*IE模型*/
box-sizing:border-box;

box-sizing 預設值：content-box

三、JS獲取寬高

JS獲取盒模型對應的寬和高，有以下幾種方法：

• dom.style.width/height

缺點：只能獲取 內聯樣式 的寬高，獲取不到 style標籤 或 外聯CSS 的寬高

• dom.currentStyle.width/height

獲取 頁面渲染完成後 dom的寬高（不論樣式在哪定義）。缺點：只有 IE 瀏覽器支援。

• window.getComputedStyle(dom).width/height

原理同上，這個相容性，通用性更好

• dom.getBoundingClientRect().width/height

根據元素（左上角）在視窗中的絕對位置來獲取寬高的：content+padding+border

---

getBoundingClientRect用於獲取某個元素相對於視窗的位置集合。集合中有8個屬性：

• top：元素上邊到視窗上邊的距離;
• right：元素右邊到視窗左邊的距離;
• bottom：元素下邊到視窗上邊的距離;
• left：元素左邊到視窗左邊的距離;
• width：元素寬度;
• height：元素高度;
• x：元素內容與視口的水平距離;
• y：元素內容與視口的垂直距離;

• dom.offsetWidth/offsetHeight

dom物件的可見寬度，包含content + padding + border，預設單位px

注：以上dom泛指：

• document.getElementById()
• document.getElementsByName()
• document.getElementsByTagName()
• document.getElementsByClassName()
• document.documentElement()
• document.body()
• …

四、邊距重疊

下面是發生邊距重疊的幾種情況：大概分為父子、兄弟、自身邊距重疊。

• 兄弟邊距重疊，取最大值
  
• 父子邊距重疊，取最大值
  
• 空白元素自身邊距重疊，取最大值
  
  
  

線上效果檢視：http://oliverdada.gitee.io/front-end-of-the-interview_test/box_margin_overlap.html

---

邊距重疊一般指的是垂直方向，水平方向不確定。。。歡迎留言討論

五、BFC（邊距重疊解決方案）

Box、Formatting Context

首先分別理解一下Box、Formatting Context

Box 是 CSS 佈局的物件和基本單位， 直觀點來說，就是一個頁面是由很多個 Box 組成的。元素的型別和 display 屬性，決定了這個 Box 的型別。 不同型別的 Box， 會參與不同的 Formatting Context（一個決定如何渲染檔案的容器），因此Box內的元素會以不同的方式渲染。

Formatting context 是 W3C CSS2.1 規範中的一個概念。它是頁面中的一塊渲染區域，並且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關係和相互作用。最常見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)。(CSS2.1 中只有 BFC 和 IFC, CSS3 中還增加了 GFC 和 FFC。)

BFC

BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何佈局，並且與這個區域外部毫不相干。

BFC是一個獨立的佈局環境，其中的元素佈局是不受外界的影響，並且在一個BFC中，塊盒與行盒（行盒由一行中所有的內聯元素所組成）都會垂直的沿著其父元素的邊框排列。

BFC的佈局規則

• 內部的Box會在垂直方向，一個接一個地放置。
• Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊。
• 每個盒子（塊盒與行盒）的margin box的左邊，與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。
• BFC的區域不會與float box重疊。
• BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。反之也如此。
• 計算BFC的高度時，浮動元素也參與計算。

簡記：垂直放置、邊距重疊、完全獨立、浮動計算

如何建立BFC

1. float的值不是none。
2. position的值不是static或者relative。
3. display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4. overflow的值不是visible

BFC的作用

1.利用BFC避免margin重疊。
由於屬於同一個BFC的兩個相鄰的Box會發生margin重疊，因此我們可以設定，兩個不同的BFC，即把第二個p標籤用div包起來，然後啟用它使其成為一個BFC

<!-- BFC垂直方向邊距重疊 -->
<section class="margin">
	<style>
		.margin{
			background-color: #f00;
			overflow: hidden;
		}
		.margin p{
			margin: 10px auto 20px;
			background-color: #ff0;
		}
	</style>
	<p>1</p>
	<div style="overflow: hidden;">
		<p>2</p>
	</div>
	<p>3</p>
</section>

2.自適應兩欄佈局

<!-- BFC不與float重疊，實現自適應兩欄佈局 -->
<section class="layout">
	<style>
		.layout{
			background-color: #f00;
		}
		.layout .left{
			float: left;
			width: 100px;
			height: 100px;
			background-color: #ff0;
		}
		.layout .right{
			height: 110px;
			background-color: #f0f;
			overflow: hidden;
		}
	</style>
	<div class="left">left</div>
	<div class="right">right</div>
</section>

3.清除浮動

<!-- BFC子元素即使是float也參與高度計算 -->
<section class="float">
	<style>
		.float{
			background-color: #f00;
			overflow: auto;
			/* overflow: hidden; */
			/* float: left; */
		}
		.float>div{
			float: left;
			font-size: 30px;
		}
	</style>
	<div>我是浮動元素</div>
</section>

線上效果檢視：http://oliverdada.gitee.io/front-end-of-the-interview_test/bfc_test.html

拓展閱讀：

• 什麼是BFC？看這一篇就夠了