盒子模型的理解
來自： https://segmentfault.com/a/1190000004528408
概述
-
網頁設計中常聽的屬性名：內容(content)、填充(padding)、邊框(border)、邊界(margin)，CSS盒子模型都具備這些屬性，也主要是這些屬性。
-
這些屬性我們可以把它轉移到我們日常生活中的盒子(箱子)上來理解，日常生活中所見的盒子也就是能裝東西的一種箱子，也具有這些屬性，所以叫它盒子模型。
-
CSS盒子模型就是在網頁設計中經常用到的CSS技術所使用的一種思維模型。
-
盒子模型是css中一個重要的概念，理解了盒子模型才能更好的排版。其實盒子模型有兩種，分別是 ie 盒子模型和標準 w3c 盒子模型。他們對盒子模型的解釋各不相同。
標準盒子模型
從上圖可以看到標準 w3c 盒子模型的范圍包括 margin、border、padding、content，并且 content 部分不包含其他部分。
ie 盒子模型
從上圖可以看到 ie 盒子模型的范圍也包括 margin、border、padding、content，和標準 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border 和 pading。
例：一個盒子的 margin 為 20px，border 為 1px，padding 為 10px，content 的寬為 200px、高為 50px，假如用標準 w3c 盒子模型解釋，那么這個盒子需要占據的位置為：寬 20 2+1 2+10 2+200=262px、高 20 2+1 2 10 2+50=112px，盒子的實際大小為：寬 1 2+10 2+200=222px、高 1 2+10 2+50=72px；假如用ie 盒子模型，那么這個盒子需要占據的位置為：寬 20 2+200=240px、高 20*2+50=70px，盒子的實際大小為：寬 200px、高 50px。
在 CSS 中，width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸。
1、提示：背景應用于由內容和內邊距、邊框組成的區域。 2、提示：內邊距、邊框和外邊距可以應用于一個元素的所有邊，也可以應用于單獨的邊。 3、提示：外邊距可以是負值，而且在很多情況下都要使用負值的外邊距。
瀏覽器兼容性
一旦為頁面設置了恰當的 DTD，大多數瀏覽器都會按照上面的圖示來呈現內容。然而 IE 5 和 6 的呈現卻是不正確的。根據 W3C 的規范，元素內容占據的空間是由 width 屬性設置的，而內容周圍的 padding 和 border 值是另外計算的。不幸的是，IE5.X 和 6 在怪異模式中使用自己的非標準模型。這些瀏覽器的 width 屬性不是內容的寬度，而是內容、內邊距和邊框的寬度的總和。雖然有方法解決這個問題。但是目前最好的解決方案是回避這個問題。也就是，不要給元素添加具有指定寬度的內邊距，而是嘗試將內邊距或外邊距添加到元素的父元素和子元素。
那我們開發的時候選擇哪中盒子模型呢？
肯定是“標準 w3c 盒子模型”。怎么樣才算是選擇了“標準 w3c 盒子模型”呢？很簡單，就是在網頁的頂部加上 doctype 聲明。假如不加 doctype 聲明，那么各個瀏覽器會根據自己的行為去理解網頁，即 ie 瀏覽器會采用 ie 盒子模型去解釋你的盒子，而 ff 會采用標準 w3c 盒子模型解釋你的盒子，所以網頁在不同的瀏覽器中就顯示的不一樣了。反之，假如加上了 doctype 聲明，那么所有瀏覽器都會采用標準 w3c 盒子模型去解釋你的盒子，網頁就能在各個瀏覽器中顯示一致了。
所以為了讓網頁能兼容各個瀏覽器，讓我們用標準 w3c 盒子模型。CSS3 box-sizing 屬性
定義和用法
box-sizing 屬性允許您以特定的方式定義匹配某個區域的特定元素。
box-sizing 有兩個值一個是 content-box ，另一個是 border-box 。
當設置為 box-sizing:content-box 時，將采用 *標準模式* 解析計算，也是默認模式；
當設置為 box-sizing:border-box 時，將采用 *怪異模式* 解析計算；
目前使用此屬性需要前綴如下:
-webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box|border-box|inherit;
例如，假如您需要并排放置兩個帶邊框的框，可通過將 box-sizing 設置為 "border-box"。這可令瀏覽器以 怪異模式 呈現出帶有指定寬度和高度的框，并把邊框和內邊距放入框中。