在CSS中，為了方便設置元素的CSS屬性和實現相應的布局，瀏覽器首要任務就是判定元素大小。

在HTML文檔中每個元素都被處理成一個矩形“盒子”，并且這個盒子由4部分構成，分別是content（內容區域）、padding（內邊距）、border（邊框）、margin（外邊距）。

?

與其對應4個CSS屬性分別是：

1、內容區域，真正包含元素的區域，通過width和height進行設置。（標準盒模型）

2、內邊距，內容與邊框間的空白區域，通過padding進行設置，可分別設置4個方向的內邊距。

3、邊框，元素邊框，通過border進行設置，可分別設置4個邊框。

4、外邊距，相鄰盒子間的空白區域，通過margin進行設置，可分別設置4個方向的外邊距。

根據 W3C 的規范，元素內容占據的空間是由?width/height?屬性設置的，而內容周圍的 padding 和 border 值是另外計算的；即在標準模式下的盒模型，盒子實際內容（content）的width/height = 我們設置的width/height; 盒子總寬度/高度 = width/height+padding+border+margin。

在標準盒模型下：

盒子實際大小 = content（width/height） + padding + border + margin

IE盒子模型(怪異盒模型)

除此之外還有IE盒模型，但是只會出現在IE6和IE怪異模式下。

在該模式下，瀏覽器的 width 屬性不是內容的寬度，而是內容、內邊距和邊框的寬度的總和；即在怪異模式下的盒模型，盒子的（content）寬度 + 內邊距padding + 邊框border寬度 = 我們設置的width(height也是如此)，盒子總寬度/高度 = width/height + margin?=?內容區寬度/高度 + padding + border + margin。

總結

以上是生活随笔為你收集整理的html盒子模型的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。