什么是盒子模型，CSS盒子模型简介

盒子模型是使用 CSS 控制页面时的一个很重要的概念，只有很好地掌握了盒子模型及其中每个元素的用法，才能真正地控制好页面中的各个元素。本节主要介绍盒子模型的基本概念。

所有页面中的元素都可以被看成一个盒子，占据一定的页面空间。一般来说，这些被占据的空间往往都要比单纯的内容大。换句话说，可以通过调整盒子的边框和距离等参数来调整盒子的位置和大小。

一个页面由很多这样的盒子组成，这些盒子之间会互相影响，因此掌握盒子模型需要从两方面来理解：一方面是理解一个孤立的盒子的内部结构；另一方面是理解多个盒子之间的相互关系。

盒子与模型的概念

在学习盒子模型之前，先来看一个实例。假设在墙上整齐地排列着 4 幅画，如图下所示。


每幅画都有一个边框，英文为 border；每个画框中，画和边框通常会有一定的距离，这个距离被称为“内边距”，英文为 padding；各幅画之间通常也不会紧贴着，它们之间的距离被称为“外边距”，英文为 margin。

这些距离实际上存在于生活中的各个地方，如电视机、显示器和窗户等。因此，“padding-border-margin”模型是一个极其通用的描述矩形对象布局形式的方法。这些矩形对象可以统称为“盒子”，英文为 box。

了解了盒子之后，还需要理解“模型”这个概念。所谓“模型”，就是对某种事物的本质特性的抽象。

模型的种类有很多，例如物理上有物理模型。爱因斯坦提出了著名的E=mc2公式，就是对物理学中质量和能量转换规律的本质特性进行抽象后的精确描述。这样一个看起来十分简单的公式，却有着巨大的作用，这就是模型的重要价值。

同样，在网页布局中，为了能够合理地组织纷繁复杂的各个部分，一些有识之士对它的本质进行了充分研究后，总结出了一套完整的、行之有效的规则，即盒子模型。

在 CSS 中，一个独立的盒子模型由 content（内容）、border（边框）、padding（内边距）和 margin（外边距）4 个部分组成，如下图所示：


可以看到，盒子模型与图 1 非常相似。盒子的概念是非常容易理解的，但是如果需要进行精确的排版，有的时候 1 个 px 都不能差，这就需要非常准确地理解其中的计算方法。

一个盒子实际所占的宽度（或高度）是由“内容+内边距+边框+外边距”组成的。在 CSS 中，可以通过设置 width 和 height 来控制内容所占的矩形的大小，并且对于任何一个盒子，都可以分别设置其 4 条边各自的边框、内边距和外边距。因此只要利用好这些属性，就能够实现各种各样的排版效果。

注意事项

并不是用 div 定义的网页元素才是盒子，事实上，所有网页元素在本质上都是以盒子的形式存在的。在人的眼中，网页上有各种内容，如文本、图片等；而在浏览器看来，它们就是许多盒子排列在一起或者相互嵌套着。

图 2 中有一个从上面开始顺时针旋转的箭头，它表示需要读者牢记的一条规则：当使用 CSS 设置这些部分的宽度时，是按照顺时针方向来确定对应关系的。

当然，还有很多具体的特殊情况，并不能用很简单的规则覆盖全部的计算方法。