3.1 盒子的内部结构

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

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

在本章中首先讲解独立的盒子相关的性质，然后将介绍在普通情况下盒子的排列关系。在下一章中，将更深入地讲解浮动和定位的相关内容。

在学习盒子模型之前，先来看一个例子。假设在墙上有4幅画，整齐地排列着，如图1所示。对于每幅画来说，都有一个“边框”，在英文中称为"border”；每个画框中，画和边框通常都会有一定的距离，这个距离称为“内边距”，在英文中称为“padding”；各幅蓟之间通常也不会紧贴着，它们之间的距离称为“外边距”，在英文中称为“margin”。

图1 画框示意图

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

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

模型的种类很多，例如物理上有“物理模型”，科学家牛顿提出了著名的F=ma公式，就是对物体运动的本质特性进行抽象后的精确描述。类似地，创办企业也有其“商业模型”，它是对企业运作和盈利过程的本质进行抽象后，对它的描述。

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

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

可盒子的概念是非常容易理解的，但是如果需要精确地排版，有的时候1个像素都不能差，这就需要非常精确地理解其中的计算方法。

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

注意：并不仅仅是用div定义的网页元素才是一个盒子，事实上所有的网页元素本质上都是以盒子的形式存在的。在人的眼中，一个两页上有各种内容，包括文本、图像等，而在浏览器看来，就是许多盒子在一起或者相互嵌套。

图1中有一个从上面开始顺时针旋转的箭头，它表示需要读者特别记住的原则，当使用CSS这些部分设置宽度时，是按照顺时针方向确定对应关系的，下一节会详细介绍。

当然还有很多具体的特殊情况，并不能用很简单的规则覆盖全部的计算方法，因此在这一章中，将深入盒子模型的内部，把一般原则和特殊情况都尽可能地阐述清楚。

点击下载第1~7章CSS教程资源 返回《CSS教程布局之道》教程列表