W3C盒模型与IE盒模型

SS盒子模型：网页设计中CSS技术所使用的一种思维模型。

CSS盒子模型组成：外边距（margin）、边框（border）、内边距（padding）、内容（content）。

CSS盒子模型分为：标准W3C盒子模型，IE盒子模型，注意在两种模型中宽（width）和高（height）包括属性的不同。

W3C模型中：

CSS中的宽（width）=内容（content）的宽

CSS中的高（height）=内容（content）的高

eg:

W3C模型

则此div的实际大小：

div高=height+（padding+border+margin）*2=50+(2+1+3)*2=62px;

div宽=width+（padding+border+margin）*2=50+(2+1+3)*2=62px;

 div内容占大小：

div高=height=50px;

div宽=width=50px；

IE盒模型

E模型中：

CSS中的宽（width）=内容（content）的宽+（border+padding）*2

CSS中的高（height）=内容（content）的高+（border+padding）*2

eg:

W3C模型

则此div的实际大小：

div高=height+margin2=50+32=56px;

div宽=width+margin2=50+32=62px;

 div内容占大小：

div高=height-（border+padding）*2=50-（1+2）*2=44px;

div宽=width-（border+padding）*2=50-（1+2）*2=44px;