Skip to main content

盒模型 Box Model

Docs
User agent stylesheets

什么是 CSS 盒模型​

完整的 CSS 盒模型应用于块级盒子，内联盒子只使用盒模型中定义的部分内容。模型定义了盒的每个部分 —— margin, border, padding, and content —— 合在一起就可以创建我们在页面上看到的内容。为了增加一些额外的复杂性，有一个标准的和替代（IE）的盒模型。

盒模型的各个部分​

每个盒子由四个部分（或称区域）：外边距 margin，内边距 padding，内容 content 和 边框 border 组成，其效用由它们各自的边界（Edge）所定义（原文：defined by their respective edges，可能意指容纳、包含、限制等）。如图，与盒子的四个组成区域相对应，每个盒子有四个边界：内容边界 Content edge、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。

Diagram of the box model

  • 内容 Content box: 元素的内容 width/height 这个区域是用来显示内容，大小可以通过设置 width 和 height.
  • 内边距 Padding box: 元素和内容之间的间距 包围在内容区域外部的空白区域；大小通过 padding 相关属性设置。
  • 边框 Border box: 元素自己的边框 边框盒包裹内容和内边距。大小通过 border 相关属性设置。
  • 外边距 Margin box: 元素和其他元素之间的间距 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置。

盒模型

方框模型难以理解，所以，我们使用一个类比来学习。

Three photo frames

该图中有三个并排安装在墙上的画框。该图包含关联框架元素和方框模型的标签。

  • 内容 Content box 就是画框中的美术作品。
  • 内边距 Padding box 是白色衬纸，它位于画框和美术作品之间。
  • 边框 Border box 就是画框，用于为美术作品提供文字边框。
  • 外边距 Margin box 是每个画框之间的空间。
  • 阴影与外边距占据相同的空间。

因为盒子有四边，所以 margin / padding / border 都包括 top / right / bottom / left 四个边：

CSS Inline Box

标准盒模型​

在标准模型中，如果你给盒设置 width 和 height，实际设置的是 content box。padding 和 border 再加上设置的宽高一起决定整个盒子的大小。见下图。

假设定义了 width, height, margin, border, and padding:

.box {
  width: 350px;
  height: 150px;
  margin: 25px;
  padding: 25px;
  border: 5px solid black;
}

如果使用标准模型宽度 = 410px (350 + 25 + 25 + 5 + 5)，高度 = 210px (150 + 25 + 25 + 5 + 5)，padding 加 border 再加 content box。

Showing the size of the box when the standard box model is being used.

备注

margin 不计入实际大小 —— 当然，它会影响盒子在页面所占空间，但是影响的是盒子外部空间。盒子的范围到边框为止 —— 不会延伸到 margin。

替代 IE 盒模型​

你可能会认为盒子的大小还要加上边框和内边距，这样很麻烦，而且你的想法是对的 ! 因为这个原因，css 还有一个替代盒模型。使用这个模型，所有宽度都是可见宽度，所以内容宽度是该宽度减去边框和填充部分。使用上面相同的样式得到 (width = 350px, height = 150px).

Showing the size of the box when the alternate box model is being used.

默认浏览器会使用标准模型。如果需要使用替代模型，您可以通过为其设置 box-sizing: border-box 来实现。这样就可以告诉浏览器使用 border-box 来定义区域，从而设定您想要的大小。

.box {
  box-sizing: border-box;
}

如果你希望所有元素都使用替代模式，而且确实很常用，设置 box-sizing 在 <html> 元素上，然后设置所有元素继承该属性，正如下面的例子。如果想要深入理解，请看 the CSS Tricks article on box-sizing。

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}
备注

一个有趣的历史记录 ——Internet Explorer 默认使用替代盒模型，没有可用的机制来切换。（译者注：IE8+ 支持使用 box-sizing 进行切换）

块级盒子 Block box​

在 CSS 中我们广泛地使用两种"盒子" —— 块级盒子 (block box) 和 内联盒子 (inline box)。这两种盒子会在页面流（page flow）和元素之间的关系方面表现出不同的行为：

一个被定义成块级的（block）盒子会表现出以下行为：

  • 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
  • 每个盒子都会换行
  • width 和 height 属性可以发挥作用
  • 内边距（padding）, 外边距（margin）和 边框（border）会将其他元素从当前盒子周围"推开"

除非特殊指定，诸如标题 (<h1>等) 和段落 (<p>) 默认情况下都是块级的盒子。

内联盒子 Inline box​

如果一个盒子对外显示为 inline，那么他的行为如下：

  • 盒子不会产生换行。
  • width 和 height 属性将不起作用。
  • 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。
  • 水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开。

用做链接的 <a> 元素、 <span>、 <em> 以及 <strong> 都是默认处于 inline 状态的。

我们通过对盒子display 属性的设置，比如 inline 或者 block ，来控制盒子的外部显示类型。

内部和外部显示类型​

在这里最好也解释下内部 和 外部 显示类型。如上所述，css 的 box 模型有一个外部显示类型，来决定盒子是块级还是内联。

同样盒模型还有内部显示类型，它决定了盒子内部元素是如何布局的。默认情况下是按照 正常文档流 布局，也意味着它们和其他块元素以及内联元素一样 (如上所述).

但是，我们可以通过使用类似 flex 的 display 属性值来更改内部显示类型。如果设置 display: flex，在一个元素上，外部显示类型是 block，但是内部显示类型修改为 flex。该盒子的所有直接子元素都会成为 flex 元素，会根据 弹性盒子（Flexbox）规则进行布局，稍后您将了解这些规则。

备注

想要了解更多有关显示值以及盒子在块和内联布局中的工作原理，请参阅 常规流中的块和内联布局。

当你进一步了解 css 布局的更多细节的时候，你会了解到 flex，和其他内部显示类型会用到的值，例如 grid 。

块级和内联布局是 web 上默认的行为 —— 正如上面所述，它有时候被称为 正常文档流，因为如果没有其他说明，我们的盒子布局默认是块级或者内联。