一、組成：

一個盒子包括了content（實際內容）、border（邊框）、padding（內邊距）和margin（外邊距）。

二、兩種盒子模型：

IE盒模型：

width=content+padding+border

盒子實際大小：width

盒子所占空間為 width+margin

圖一：IE盒模型

標準盒模型：

width=content

盒子實際大小：width+padding+border

盒子所占空間為 width+padding+border+margin

圖一：標準盒模型

三、box-sizing：

box-sizing有三個取值：

1、content-box:使元素遵循標準 w3c 盒子模型（默認值）。

2、border-box:使元素遵循ie 盒子模型。

3、inherit： 規定應從父元素繼承 box-sizing 屬性的值。

四、其它：

遵循ie盒子模型時，不管如何設置padding和border（小於width/2），它只在盒子裏面伸縮，不影響整體的寬高。

理解盒子模型