一、W3C標準盒模型 標準盒模型width只包含content的寬。  二、 IE盒模型 IE盒模型的width=border*2+padding*2+content  ? 三、為什么IE盒模型更容易開發？ 比如要在一個容器里并排顯示兩個同樣的盒子。你用標準模型時肯定會這樣設置每個盒子width:50%。再怎么去調整padding都會在兩個盒子的內部去調整，不會再影響布局。 四、如何將保準盒模型轉化為IE盒模型？ CSS3中運用box-sizing屬性來特定定義匹配在某個區域的特定元素。 box-sizing:content-box，表示按照標準的盒模型顯示。 box-sizing:border-box，表示按照IE盒模型來顯示，通過已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。? ### 什么是“盒子” 初學 CSS 的朋友，一開始學 CSS 基礎知識的時候一定學過`padding``border`和`margin`，即內邊距、邊框和外邊距。它們三者就構成了一個“盒子”。就像我們收到的快遞，本來買了一部小小的手機，收到的卻是那么大一個盒子。因為手機白色的包裝盒和手機機器之間有間隔層（內邊距），手機白色盒子有厚度，雖然很薄（邊框），盒子和快遞箱子之間還有一層泡沫板（外邊距）。這就是一個典型的盒子。  如上圖，真正的內容就是這些文字，文字外圍有 10px 的內邊距，5px 的邊框，10px 的外邊距。看到盒子了吧？ > 題目：盒子模型的寬度如何計算 ### 固定寬度的盒子 ~~~ <div style="padding:10px; border:5px solid blue; margin: 10px; width:300px;"> 之前看過一篇文章，叫做《瀏覽器工作原理：新式網絡瀏覽器幕后揭秘》， 文章言簡意賅的介紹的瀏覽器的工作過程，web前端 </div> ~~~  如上圖，得到網頁效果之后，我們可以用截圖工具來量一下文字內容的寬度。發現，文字內容的寬度剛好是 300px，也就是我們設置的寬度。 因此，**在盒子模型中，我們設置的寬度都是內容寬度，不是整個盒子的寬度。而整個盒子的寬度是：（內容寬度 +`border`寬度 +`padding`寬度 +`margin`寬度）之和**。這樣我們改四個中的其中一個，都會導致盒子寬度的改變。這對我們來說不友好。 沒關系，這個東西不友好早就有人發現了，而且已經解決，下文再說。 ### 充滿父容器的盒子 默認情況下，`div`是`display:block`，寬度會充滿整個父容器。如下圖： ~~~ <div style="padding:10px; border:5px solid blue; margin: 10px; width:300px;"> 之前看過一篇文章，叫做《瀏覽器工作原理：新式網絡瀏覽器幕后揭秘》， 文章言簡意賅的介紹的瀏覽器的工作過程，web前端 之前看過一篇文章，叫做《瀏覽器工作原理：新式網絡瀏覽器幕后揭秘》， 文章言簡意賅的介紹的瀏覽器的工作過程，web前端 </div> ~~~  但是別忘記，這個 div 是個盒子模型，它的整個寬度包括（內容寬度 +`border`寬度 +`padding`寬度 +`margin`寬度），整個的寬度充滿父容器。 問題就在這里。如果父容器寬度不變，我們手動增大`margin`、`border`或`padding`其中一項的寬度值，都會導致內容寬度的減少。極端情況下，如果內容的寬度壓縮到不能再壓縮了（例如一個字的寬度），那么瀏覽器會強迫增加父容器的寬度。這可不是我們想要看到的。 ### 包裹內容的盒子 這種情況下比較簡單，內容的寬度按照內容計算，盒子的寬度將在內容寬度的基礎上再增加（`padding`寬度 +`border`寬度 +`margin`寬度）之和。 ~~~ <div style="padding:10px; border:5px solid blue; margin: 10px; width:300px;"> 之前看過一篇文章，叫做《瀏覽器工作原理：新式網絡瀏覽器幕后揭秘》 </div> ~~~  ### `box-sizing:border-box` 前面提到，為盒子模型設置寬度，結果只是設置了內容的寬度，這個不合理。如何解決這一問題？答案就是為盒子指定樣式：**`box-sizing:border-box`**。 ~~~ <div style="padding:10px; border:5px solid blue; margin: 10px; width:300px; box-sizing:border-box;"> 之前看過一篇文章，叫做《瀏覽器工作原理：新式網絡瀏覽器幕后揭秘》 </div> ~~~  上圖中，為`div`設置了`box-sizing:border-box`之后，300px 的**寬度是內容 +`padding`\+ 邊框的寬度（不包括`margin`）**，這樣就比較符合我們的實際要求了。建議大家在為系統寫 CSS 時候，第一個樣式是： ~~~ * { box-sizing:border-box; } ~~~ 大名鼎鼎的 Bootstrap 也把`box-sizing:border-box`加入到它的`*`選擇器中，我們為什么不這樣做呢？ ### 縱向 margin 重疊 這里提到 margin，就不得不提一下 margin 的這一特性——縱向重疊。如`<p>`的縱向 margin 是 16px，那么兩個`<p>`之間縱向的距離是多少？—— 按常理來說應該是 16 + 16 = 32px，但是答案仍然是 16px。因為縱向的 margin 是會重疊的，如果兩者不一樣大的話，大的會把小的“吃掉”。