css盒模型

1.盒子组成

margin

外边距代表盒子四周的区域。

border

设定介于padding的外边缘与margin的内边缘之间，默认值为0。

padding

内间距在任何定义的边界内的元素内容周围生成空间。

width & height

内容区的宽高，该片区域用于显示内容。

一个盒子应该由外边距、边框、内边距、内容组成。

2.盒模型

盒模型有两种，分别是内容盒子(W3C盒子)和边框盒子(IE盒子) 

内容盒子(默认)

当我们为内容盒子设置width和height时，是直接对内容区域进行赋值，如果再设置padding和border都不会对内容区域有所影响，所以盒子所占的总体宽度要更大。

所占空间大小为：width/height+padding+border+margin

 边框盒子

为边框盒子设置width和height时，它包含了内容区域的宽高，也包含了padding和border的宽高，如果同时也设置了padding和border，内容区域会减少保持整个盒子大小不变。

所占空间大小：width/height+margin