# CSS盒子模型

盒子模型（Box Model）是CSS控制页面时一个很重要的概念。只有很好地掌握了盒子模型以及其中每个元素的用法，才能真正地控制好页面中的各个元素。 所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。 一般来说这些被占据的空间往往都要比单纯的内容大。 可以通过调整盒子的边框和边距等参数，来调节盒子的位置和大小。一个页面由很多这样的盒子组成，这些盒子之间会互相影响。 掌握盒子模型需要从两方面来理解：一是理解单个的盒子的内部结构；二是理解多个盒子之间的相互关系。 本文首先讲解独立的盒子相关的性质，然后介绍在普通情况下盒子的排列关系。下一次将更深入地讲解浮动和定位的相关内容。

# 一． 盒子模型概念

1. 现实生活中的盒子： 图1 现实生活中的盒子

2. 盒子模型（Box Model） 在网页布局中，为了能够使纷繁复杂的各个部分合理地进行组织，通过研究，总结出了一套完整的、行之有效的原则和规范，这就是“盒子模型”的由来。 在CSS中，一个独立的盒子模型由内容(content)、边框(border)、填充(padding)和边界(margin)4个部分组成：

• 内容(content)：对应盒内物品
• 边框(border)：对应包装盒的纸壳，具有厚度
• 填充(padding)：位于边框内部，是内容与边框的距离，对应包装盒的填充部分
• 边界(margin)：位于边框外部，是边框外面周围的间隙，对应纸壳外围间隙 - 图2 标准盒子模型

3. 盒子模型的三维立体结构图 图3 CSS2.0盒子模型的三维立体结构图

• 边框（border），位于盒子的第一层。
• 元素内容（content）、内边距（padding），两者同位于第二层。
• 背景图（background-image），位于第三层。
• 背景色（background-color），位于第四层。
• 整个盒子的外边距（margin），位于第五层。