盒模型概述

在渲染文档时，浏览器会将每个元素视为一个矩形框，这就是盒模型。CSS 决定了这个框的大小，其基础由以下属性构成：

• content（内容）
• padding（内边距）
• border（边框）
• margin（外边距）

一个直观的理解方式是打开浏览器的开发者工具：右键点击某个元素，选择“检查”，然后查看开发者工具中的布局面板。你可以看到如下所示的结构：

在这里，我们可以查看页面上任意元素的盒模型。浅蓝色区域是内容区。在其周围依次是内边距、边框和外边距。这就是我们的盒模型！各个部分的定义如下：

• content 属性：这是内容显示的位置。可以通过 width 和 height 属性来设置大小。通常用于放置文本和图片。

• padding 属性：内边距位于内容周围，默认为透明。其大小通过 padding 属性设置。

• border 属性：边框包裹着内边距（如果有）和内容。其大小和样式由 border 属性决定。

• margin 属性：外边距在边框之外创建空白区域，使当前元素与其它元素之间保持间距。其大小通过 margin 属性设置。

借助盒模型，我们还可以为元素添加边框，并控制元素之间的间距。

通常情况下，当我们设置元素的宽度或高度时，这些规则仅适用于内容区域。而内边距、边框和外边距都会额外增加到宽度和高度上，从而形成整个盒子的总尺寸。

计算盒子尺寸

让我们看下面的例子，了解如何计算盒子的实际大小：

1.box {
2  width: 300px;
3  height: 200px;
4  margin: 10px;
5  padding: 25px;
6  border: 2px solid black;
7}

在上述 CSS 中，盒子的 width 实际为 354px（300 + 25 + 25 + 2 + 2），height 为 254px（200 + 25 + 25 + 2 + 2）。内边距和边框是在内容区域宽度的基础上额外加上去的。

但需要注意的是，外边距不计入盒子的尺寸计算中。它会影响页面上的空间分布，但只作用于盒子外部。盒子的区域止于边框，不会延伸到外边距区域。

注意：如果未声明内边距或边框，它们的值可能是零（如果你使用了 CSS 重置或框架），也可能是浏览器的默认值，而这个默认值很可能不是零。

CSS 的 box-sizing 属性

我们可以使用 CSS 的 box-sizing 属性，将内边距和边框包含进盒子尺寸的计算中，即影响盒子的总宽度和总高度。

不使用 box-sizing 属性

如前所述，元素的宽度和高度可以这样计算：

宽度 + 内边距 + 边框 = 实际元素宽度
高度 + 内边距 + 边框 = 实际元素高度

因此，当我们设置元素的宽度或高度时，它往往比预期看起来更大，因为边框和内边距始终会被加到宽度和高度上。

在下面的例子中，两个元素的尺寸不同。我们可以在 item2 中看到 padding 被指定的情况：

1.item1 {
2  width: 300px;
3  height: 200px;
4  border: 3px solid green;
5}
6.item2 {
7  width: 300px;
8  height: 200px;
9  padding: 50px;
10  border: 3px solid red;
11}

使用 box-sizing 属性

使用 box-sizing 属性后，元素的总宽度和总高度将包含 padding 和 border 的值。

我们可以在元素上设置 box-sizing: border-box;，如下代码所示：

1.item1 {
2  width: 300px;
3  height: 200px;
4  border: 3px solid green;
5  box-sizing: border-box;
6}
7
8.item2 {
9  width: 300px;
10  height: 200px;
11  padding: 50px;
12  border: 3px solid red;
13  box-sizing: border-box;
14}

这样一来，在布局时就更加直观合理，因为边框和内边距的值已经被包含在总高度和总宽度之中。

许多开发者希望这种行为能应用于页面上的所有元素。一种简单的方法是添加如下 CSS 规则：

1* {
2  box-sizing: border-box;
3}

在上述代码中，border-box 是 box-sizing 属性的取值。对于该值，width 和 height 属性不仅包括内容本身，还包括内边距和边框。

content-box 是默认值。此时，width、height（以及 min 和 max）属性仅包含内容区域，边框和内边距不被包含在内。

总结

我们学习了盒模型的定义，如何计算元素的盒子尺寸，以及如何使用 box-sizing 属性来更直观地处理元素的尺寸控制。