盒模型的一些碎碎念

1. 盒模型的簡介

本文簡單的總結了一些基本概念，知識點以及細節問題

做爲前端人員，盒模型是最基礎的知識點，在排版與佈局時不可避免與盒模型打交道。

在咱們編寫HTML時，網頁上的內容幾乎都是被包在一個個元素（固然也能夠叫作標籤）中的，最多見的有div、span、a、img等等。雖然標籤的個數不少樣，可是總的來講能夠把元素分爲三種

• 塊狀(block)元素
• 行內(inline)元素
• 行內塊(inline-block)元素

在具體講總結盒模型前，先簡單的介紹一下這幾種元素各自的特性。

在CSS中咱們常常聽到的一個詞叫作「文檔流」，那麼到底什麼是文檔流呢？「流」實際上就是CSS中的一種基本的定位和佈局機制。上述所說的三種元素固然要遵照必定的佈局機制啦，具體來講：

塊狀元素： 典型表明div

• 在默認狀況下寬度會自動鋪滿於父元素，也就是一個塊級元素會獨佔一行，並且它後面的元素會另起一行顯示。
• 寬(width)、高(height)、內邊距(padding)、外邊距(margin)是能夠進行具體設置的

行內元素： 典型表明span

• 行內元素不會獨佔一行，相鄰的行內元素會依次排列，不足則換行。
• 寬高是沒法指定的，其大小是由裏面的內容撐開決定。
• 雖然寬高沒法指定，可是水平方向上的內邊距(padding)、外邊距(margin)是能夠進行設置的。

當對一個文檔進行佈局的時候，瀏覽器渲染引擎會根據CSS-Box模型將全部元素表示爲一個矩形盒子，在CSS中會經過盒模型去描述這些矩形盒子————元素所佔空間的內容。

那麼盒子裏到底有什麼呢，以下圖所示：

對於一個盒子來講它由四個部分組成：其中margin叫作外邊距，border叫作邊框，padding叫作內邊距，content叫作內容區域

細分一點,margin它能夠分爲margin-left,margin-right,margin-top和margin-bottom。同理border和padding也有這樣的屬性。

盒子出來了，天然要計算它的大小，可是可是，又有幺蛾子了，在計算大小的時候有兩套不一樣的標準，
也就是有兩種盒模型：

• 第一種是W3C的標準模型
• 第二種是IE的怪異盒模型

天然不一樣的盒子模型會有不一樣的計算方式

2. 尺寸計算

在W3C標準模式下：一個盒子的空間佔有寬度=content width + padding + border + margin

在IE怪異盒模型：一個盒子的空間佔有寬度=width(padding和border被包含在內了) + margin

高度能夠同理計算

---

因爲存在以上的計算方法：

在CSS的標準盒模型中，width和height指的是內容區域的寬度和高度。
增長內邊距、邊框和外邊距不會影響內容區域的尺寸，可是會增長整個盒子的大小。這個特色其實有的時候有點討厭的————咱們能夠經過設置box-sizing(CSS3新增屬性)來改變盒子被撐大。

3. box-sizing(在IE8+瀏覽器中)

那麼box-sizing究竟是什麼呢？在MDN中有這樣的解釋說明：

該屬性用於更改用於計算元素寬度和高度的默認的 CSS 盒子模型。可使用此屬性來模擬不正確支持CSS盒子模型規範的瀏覽器的行爲。

在標準盒模型中，你設置一個元素的 width 與 height 只會應用到這個元素的內容區。若是這個元素有border或padding，當咱們在調整一個元素的寬度或高度時須要時刻注意這個元素的邊框和內邊距，也就上面講的會被撐大。當咱們在實現響應式佈局時候，這個特色尤其煩人。

box-sizing屬性的默認值爲content-box，也就是標準盒模型。

box-sizing另一個屬性值border-box指的就是IE盒模型。

瞭解盒模型的計算方式是很是重要的，如今的網頁，尤爲是移動端的頁面，須要適應於不一樣的屏幕大小~~~

此外，若是在ie6,7,8中DOCTYPE缺失也會觸發IE模式。

---

參考文獻：

1.張鑫旭-鑫空間-鑫生活

2.MDN-web技術文檔