CSS -- 盒子模型（含前端面试题）

盒子模型的属性

1.margin （外边距）

 盒子四周的区域

2.padding（内间距）

内容与边界之间产生的空间

3.border（边框）

在padding的外边缘与margin的内边缘之间，默认为0

4.width & height

用于显示内容的内容区的宽和高，盒子高度默认为内容区的高度

盒子的种类

使用box-sizing属性可改变盒子模型，默认的盒子模型属性值为content-box，内容盒子，即第一类盒子模型。

1.wsc盒子/标准盒子/内容盒子：

如图：

 注意点：

• 标准盒子的宽度：

width + padding-left + padding-right + border-left + border-right

• 标准盒子的高度：

 height + padding-top + padding-bottom + border-top + border-bottom

• 标准盒子所占页面的宽度： 

标准盒子的宽度  + margin-left + margin-right 

• 标准盒子所占页面的高度：