標準盒模型和 IE 盒模型

對於標準盒模型和 IE 盒模型你瞭解多少？

盒模型講解

我們今天只會提到 標準盒模型，和 IE 盒模型，兩種盒模型模式講解。首先來看標準盒模型。
只要是盒模型都會有這四個屬性 margin, border, padding, content 這四個部分。也就是說一個基本的盒模型由着四部分組成。樣子如下：
這裏要說明的是，爲了體現出盒模型的層次感。這裏的 content 和 padding 用了
不痛的顏色（紅色，白色），正常來說，我發單獨設置 padding 的顏色。也就是說 padding 和 content 內容區的背景顏色是一致的。
盒模型，就像盒子一樣。也是 box 直譯過來的。這四部分合理的配合，能做出頁面佈局。每個元素都可以看成一個個盒子，並且每個元素在頁面中，給我們的直接感受，就是佔據屏幕的大小。但是標準模式盒模型，它是很“貪心“的，這個要從它的佔地面積說起。
我們都知道標準模式的盒模型的寬高的計算公式

元素寬度 = borderLeft + paddingLeft + width + paddingRight + borderRight。
元素高度=borderTop+paddingTop+height+paddingBottom+borderBottom

這裏說到的元素寬度和高度，指的是實際佔據的寬高，而且在標準模式盒模型下， 我們設置的width 和 height 指的是 content’（內容區）的寬高。並不是他的實際寬高。
Like this：

CSS：

width: 100px; height: 100px; background: lime; padding: 10px;
border: 2px solid #f20;
}

根據上面的公式：

Div 的實際佔地寬度爲： 100+ 20 +4 = 124px; 通過我們上面的截圖，我們也能看出來是這樣的。
對於這種貪婪特性（儘可能向外擴張）。對於佈局來說，可能有些同學已經習慣
了這種佈局的方式，畢竟剛開始我們我們就是這麼學過來的。隨着代碼的積累， 發現一些問題： 我們先定製內容的大小，然後在修改 padding 和 border 導致的盒子的具體大小由這三部分決定。對於一個盒模型來說變數太大。

大家想想開發商買地蓋房子。先是圈地，然後在塊土地裏面進行操作，蓋幾幢房子。綠化面積比，太陽高度角多大等等等。這樣的話，我們位置一旦分配好了。就不用我們管了。你只能在內部改造。不可動用外部的區域。更容易限定，更容易佈局。 土地交易局不管你，房屋多大（content），綠植面積（padding），柵
欄寬度（border）怎麼分配，你就告訴我，你要多大就完了。

對於這種情況，就涉及到 IE 盒模型，也有一個尊稱叫“怪異盒模型”。對於 IE 盒模型他還是很傳統的，只在特定區域內去分配自己的空間。
舉個栗子： ‘
代碼：

box-sizing: border-box; width: 100px;
height: 100px; padding: 20px; border: 10px; margin: 20px; background: red;

}

我們看到的這個盒模型就是 IE 盒模型，給定寬度 100 邊框 10 內邊距 20 自己所剩下的寬度爲：
100 – 10 -20 -20 -10= 40；

這裏面我們看到除了外邊框，以及內邊距剩下的區域纔是 content 的區域。在這裏面涉及到一個新的屬性 box-sizing.。用於設置盒模型的模式。
Box-sizing 存在兩個屬性值

content-box 默認值， 也就是標準模式盒模型。

Border-box，設置爲 IE 模式盒模型。

border-box 的優勢：
border-box 的誕生，主要就是解決 content-box 的最大缺點。border-box 意味着子容器的 padding 和 border 的厚度都算在 50之內，這樣，你可以隨意的修改 padding 和 border 的厚度值，根本不用擔心父容器被撐爆。
border-box 是事實的標準？

現在最著名的 CSS 框架幾乎都採用了 border-box，所以它纔是事實的標準。框架想要具備柵格系統，就肯定要去使用 border-box，如果用 content-box 會有一種想死的感覺。

接下來說說盒模型存在兩個經典 BUG——margin 塌陷和合並

margin 塌陷：

父子嵌套元素在垂直方向的 margin,父子元素是結合在一起的,他們兩個的 margin

會取其中最大的值.

正常情況下,父級元素應該相對瀏覽器進行定位,子級相對父級定位.

但由於 margin 的塌陷,父級相對瀏覽器定位.而子級沒有相對父級定位,子級相對父級就像坍塌了一樣。

margin 塌陷的解決辦法
1.給父級設置邊框或內邊距(不建議使用)
2.觸發 bfc(塊級格式上下文),改變父級的渲染規則
方法:
改變父級的渲染規則有以下四種方法,給父級盒子添加
(1)position:absolute/fixed
(2)display:inline-block;
(3)float:left/right
(4)overflow:hidden
margin 合併
兩個兄弟結構的元素在垂直方向上的 margin 是合併的。
在 margin 合併這個問題上,我們一般不用 bfc,而是通過只設置上面的元素的
margin-bottom 來解決距離的問題。