标准盒模型和怪异盒模型

所有HTML元素都可以看作盒子。

盒子模型分为标准盒模型、怪异盒模型。

标准盒模型的元素内容占据的空间是由 width 、height属性设置的，而内容周围的 padding 、 border 值是另外计算的。怪异盒模型width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。

可以通过css3的box-sizing属性指定盒子模型种类：
box-sizing: content-box;//指定盒子模型为标准盒模型
box-sizing: border-box；//指定盒子模型为怪异盒模型

标准W3C盒子模型：

W3C模型中：

• CSS中的宽（width）=内容（content）的宽
• CSS中的高（height）=内容（content）的高

例：
< div style=“width:50px;height:50px;padding:2px;border:1px solid blue;margin:3px;”>

• 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盒子模型：

IE模型中：

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

例：
< div style=“width:50px;height:50px;padding:2px;border:1px solid blue;margin:3px;”>

• 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;