CSS的W3C標準的盒子模型和低版本IE瀏覽器的盒子模型

CSS中盒子模型的組成由內容區（content）、內邊距（padding）、邊框（border）、外邊距（margin）組成。內邊距可細分爲 padding-top、padding-right、padding-bottom、padding-left；邊框可細分爲 border-top、border-right、border-bottom、border-left；外邊距可細分爲 margin-top、margin-right、margin-bottom、margin-left。

對於盒子模型，W3C標準和低版本IE瀏覽器是不同的，主要區別是內容部分的width和height的定義不一樣。咱們常說的盒子模型通常指W3C標準的盒子模型。下面對此作一個區分：

若是一個元素各組成部分以下：

margin：10px； border：2px； padding：5px； width：200px；height：100px，那麼：

一、W3C標準

內容部分的width就單單指width，height就單單指height

整個盒子模型的寬是： margin*2 + border*2 + padding*2 + width（嚴格來講是：margin-left + border-left + padding-left + width + padding-right + border-right + margin-right）

整個盒子模型的高是： margin*2 + border*2 + padding*2 + height（嚴格來講是：margin-left + border-left + padding-left + height + padding-right + border-right + margin-right）

以下圖

則整個盒子模型的寬是：10px*2 + 2px*2 + 5px*2 + 200px = 234px

則整個盒子模型的高是：10px*2 + 2px*2 + 5px*2 + 100px = 134px

二、低版本IE瀏覽器（主要是指IE5和（IE6的怪異模式），不過如今這兩個版本的瀏覽器的市場佔有率已經很低了）的標準：

內容部分的width和height是把內邊距（padding）和邊框寬度（border）也算進去

整個盒子模型的寬是： margin*2 + width（嚴格來講是：margin-left + width + margin-right）

整個盒子模型的高是： margin*2 + height（嚴格來講是：margin-left + height + margin-right）

以下圖

則整個盒子模型的寬是：10px*2 + 200px = 220px

則整個盒子模型的高是：10px*2 + 100px = 120px

以下博文有對W3C標準有更詳細的說明：

CSS（10）盒子模型