CSS盒模型

- 内容盒子(W3C盒子)

默认盒子模型 W3C盒子

使用box-sizing属性可以改变盒子模型，取值“content-box”的盒子为默认盒子模型。

内容区的宽

width

内容区的高

height

盒子的宽

width+paddingLeft+paddingRight+borderLeft+borderRight

盒子的高

height+paddingTop+paddingBottom+borderTop+borderBottom

所占屏幕空间的宽

width+paddingLeft+paddingRight+borderLeft+borderRight +marginLeft+marginRight

所占屏幕空间的高

height+paddingTop+paddingBottom+borderTop+borderBottom+marginTop+marginBottom

内容盒子也称为普通盒子，其特点为：当我们为一个盒子指定width属性的时候，实际上width仅为内容的宽度，当padding和border变大的时候，内容宽度不变，盒子所占的总体宽度要变大。

- 边框盒子(IE盒子模型)

边框盒子模型

IE盒子使用box-sizing属性可以改变盒子模型，取值“border-box”的盒子为边框盒子模型。

内容区的宽

width-paddingLeft-paddingRight-borderLeft-borderRight

内容区的高

height-paddingTop-paddingBottom-borderTop-borderBottom

盒子的宽

width

盒子的高

height

所占屏幕空间的宽

width+marginLeft+marginRight

所占屏幕空间的高

height+marginTop+marginBottom

边框盒子特点为：当我们为一个盒子指定width属性的时候，实际上width包含了border和padding的宽度，如果border不变，padding变大，这时候内容会变小。