CSS盒子模型

前言：

盒子模型是CSS的基石之一，它指定元素如何显示以及如何交互。网页就是由许多个盒子通过不同的排列方式（上下排列，并列排列，嵌套排列）堆积而成。

基础：

CSS中，Box Model叫盒子模型或框模型，Box Model规定了元素框处理元素内容（element content）、内边距（padding）、边框（border）和外边框（margin）的方式。

在html文档中，每个元素即element都有盒子模型，它对页面布局起到了巨大的作用。

Box Model图示：

盒子模型的特性：

1）一个元素实际宽度=左边界+左边框+左填充+内容+右填充+右边框+右边界。

2）边界值margin可为负，填充padding不可为负。

3）边框border默认值为0，即不显示。

4）行内元素，如a，定义上下边界不影响行高（由line-height属性决定）。

每个属性与盒子的类比：

边框（border）：对应包装盒的纸壳，具有一定的厚度。

内边距（padding）：位于边框内部，是内容与边框的距离，对应包装盒的填充部分。

外边距（margin）：位于边框外部，是边框面周围的空隙，对应纸壳外围间隙。

元素内容：盒子内部的物品。