是什麼
盒模型又稱框模型（Box Model）,包含了元素內容（content）、內邊距（padding）、邊框（border）、外邊距（margin）幾個要素
目的
- 方便計算寬度
- 更好佈局
組合
W3C標準模型
是什麼
默認都是W3C標準模型
width = content.width
height = content.height
、
分類邊界
<!DOCTYPE html>
組合
通過CSS3新增的屬性 box-sizing: content-box設置盒模型爲標準模型（content-box）
.content-box {
box-sizing:content-box;
width: 100px;
height: 50px;
padding: 10px;
border: 5px solid red;
margin: 15px;
}
.content-box設置爲標準模型，它的元素寬度width=100px
IE模型
是什麼
width = content.width + 2padding-left + 2border-left
height = content.height + 2padding-top + 2border-top
分類邊界
form表單中的部分元素還是基於IE的怪異盒模型，input中的
- radio
- checkbox
- button
如果給其設置 border 和 padding 它們也只會往元素盒內延伸
如果不加DOCTYPE聲明，那麼各個瀏覽器會根據自己的行爲去理解網頁
- IE瀏覽器會採用IE盒子模型去解釋你的盒子
- Chrome、Firefox等瀏覽器會採用標準W3C盒子模型解釋你的盒子
如果加上了DOCTYPE聲明，那麼所有瀏覽器都會採用標準W3C盒子模型去解釋你的盒子，網頁就能在各個瀏覽器中顯示一致了
組合
通過CSS3新增的屬性 box-sizing: border-box設置盒模型爲IE模型（border-box）
.border-box {
box-sizing: border-box;
width: 100px;
height: 50px;
padding: 10px;
border: 5px solid red;
margin: 15px;
}
.border-box設置爲IE模型，它的元素寬度width = content + 2padding + 2border = 70px + 210px + 25px = 100px
BFC
是什麼
- 塊級格式化上下文
- BFC決定了元素如何對其內容進行定位，以及與其他元素的關係和相互作用
- 當設計到可視化佈局的時候，BFC提供了一個環境，HTML元素在這個環境中按照一定的規則進行佈局
- 一個環境中的元素不會影響到其他環境中的佈局。
順序
- overflow不爲visible;
- float的值不爲none；
- position的值不爲static或relative；
- display屬性爲
inline-blocks,table,table-cell,table-caption,flex,inline-flex
條件
- BFC元素垂直方向的邊距會發生重疊。屬於不同BFC外邊距不會發生重疊
- BFC的區域不會與浮動元素的佈局重疊
- BFC元素是一個獨立的容器，外面的元素不會影響裏面的元素。裏面的元素也不會影響外面的元素
- 計算BFC高度的時候，浮動元素也會參與計算(清除浮動)
條件
外邊距重疊
是什麼
當兩個垂直外邊距相遇時，他們將形成一個外邊距，合併後的外邊距高度等於兩個發生合併的外邊距的高度中的較大者
分類邊界
只有普通文檔流中塊框的垂直外邊距纔會發生外邊距合併，行內框、浮動框或絕對定位之間的外邊距不會合並
順序
