4.4　一切都是盒子——盒子模型

请你做个裁判，看看图4.10中的（a）和（b）两个照片墙，哪个更好看？为什么？

（a）中的图片是采用默认的img样式，即横向排列，而（b）则是通过CSS的盒模型，设计盒子之间的距离，实现照片之间留下空白，让照片墙因距离而产生美。如果你也想制作属于个性定制的照片墙，一定要学会如何使用盒子模型。

4.4.1　盒子模型的基本定义

图4.11是引自W3C官网的标准盒子模型，我们先作简单了解。

要知道，每一个可以包裹内容的元素都可以定义盒子模型，该模型可以想象成两层盒子。以W3C的标准盒子模型为例（图4.11），外层盒子的边框是不可见的。因此，无法给最外层边框定义样式。而内层盒子的边框是可见的，因此可以定义border样式。关于盒子的边距，则分为外边距（margin）和内边距（padding）。

关于width和height的“坑”

在给某个元素定义宽度（width）和高度（height）属性时，是指盒子内部的内容（content）的宽度和高度，而不是盒子的实际值。盒子的实际高度和宽度的计算方式如下：

盒子宽度=border-left+padding-left+width+padding-right+border-right

盒子高度=border-top+padding-top+height+padding-bottom+border-bottom

即使是body元素的盒子，它默认的四个外边距margin也是8个像素，所以body内部的内容并不是占据了整个页面。如果你想让页面内容占据整个页面且横向居中显示，就需要自定义一个样式：

这里我们用两个值的方式声明了body元素的外边距，其中第一个0表示上下边距为0，第二个auto，表示自动计算剩余空间，保证左右间距平分剩余空间，所以效果就是左右居中对齐。使用该属性，有一个要点，就是要配合width的定义，因为你没有见到过哪个网页是把宽度占满屏幕的一整行，那样很奇怪，而且对于超过1200px的屏幕宽度，用户需要移动头部才能看到完整内容，这是很不人性化的。另外，如果width没有定义，则采用默认宽度为整个屏幕的宽度，那么auto值计算出来的剩余空间就为0，也看不出来居中对齐的效果。

一定要知道的技巧

margin：0 auto；这是一个非常有用的让盒子元素自动居中的样式声明，一定要记住。大多数网站，一定会给诸如body，div等元素定义该属性让其内容左右自动居中。不过，它一定要配合width属性使用，width的值要小于元素的默认值，切记。

还有一个值得注意的地方，当属性涉及单位时，注意数值和单位之间不要有空格，比如：

4.4.2　盒子使用定理

盒子模型在元素的布局中十分重要，通过给盒子内的元素设置margin和padding属性实现元素与边框之间的间距，达到距离产生美的效果。关于这两个属性的用法可以参考以下使用技巧：

（1）margin用于定义两个盒子之间的距离，又称外边距；

（2）padding用于盒子的内边框和内容之间的间距，又称内边距；

（3）还可以单独设定盒子上下左右的某一侧间距，包裹margin-top（上外边距），margin-bottom（下外边距），margin-left（左外边距），margin-right（右外边距），padding-top（上内边距），padding-bottom（上内边距），padding-left（左内边距），padding-right（右内边距）；

（4）无论是外边距还是内边距，都有四种定义方式：

一般来说，外边距的使用频率比内边距要高一些。

4.4.3　盒子在页面布局中的两种常见用法

盒子模型经常用于页面中元素的布局，接下来介绍两种盒子布局的用法：整体布局和内部布局。

1．整体布局

当我们在建设一个网站时，首先需要设计整体布局，比如一个网页的布局为上（1）中（8）下（1）的三明治布局，或者上（1）左（1）右（4）的厂字型布局，这些布局都可以通过盒子模型来实现，下面来看一个典型的上中下布局，如图4.12所示。

通过对布局的整体分析，得出如图4.13所示的分解图，于是我们可以采用三个不同的标签将页面划分成三个不同的功能区域，主要HTML代码如下：

对每一个区域可以定义不同的背景颜色和宽高，my.css中的样式定义如下：

最后，呈现出的效果就是图4.13。接下来再来看另一种常用的布局：内部布局。

2．内部布局

盒子元素还可以做细致的内部元素布局，如图4.14所示。

图4.14是一条评论内容，其中包括用户头像图片、用户名、评论内容、评论时间、点赞数量和回复等子内容。那么，要做到如图4.14所示的布局，大致需要定义多少种样式？思考1分钟后，再参考一下图4.15给出的一个可选方案（切记这只是可能方案之一，你还可以设计不同的方案）。

为什么要做这样的分解？

在上面的布局中，可以看到很多个不同颜色边框的盒子元素，看上去像是把一块大盒子不断做分解，折分成若干个小盒子。这样做最大的好处是给不同的盒子添加个性化的样式，也为了让每一个盒子之间都有间距样式的控制。这样的场景非常常见，每一个网页上都会有这种布局。这也是很多开发人员喜欢用div元素做布局的原因。

接下来，我们分别来看一下每个盒子的作用。

（1）最外层黑色盒子，是为了和其他类似的盒子产生距离，也为了控制整体盒子的大小。

（2）左侧图片区盒子，是为了方便地定义头像图片的样式，也为了增加一些间距。

（3）右侧内部的盒子很复杂，先从大的来说，有上中下区分，其中上方蓝色盒子是用户相关信息，中部是评论内容区，下方紫色盒子是评论时间、点赞和回复区。

（4）在右侧下方紫色盒子内部，又可以分为三个小盒子：评论时间、点赞和回复。这样拆分的原因是评论时间与点赞的字体颜色不一样，因此采用分开的盒子更便于设置单独的样式。而点赞和回复最好也采用两个不同的盒子，原因是点赞的图片和回复前的图标不一样，各自用不同的盒子布局便于利用CSS中的图片样式加以区别。

最后，请参考图4.16的实现代码，自己做一遍。有不理解的样式属性也不要紧，此时，只需要了解如何用嵌套的div盒子做布局即可。