CSS 中的盒子模型，或盒模型，是 box model。它指的是我们把元素看成一个个盒子。

所以看到说盒子怎么怎么样，实际指的是某个元素的行为如何。

box model 定义了盒子四个部分（如下）之间如何协作，最后创建出一个显示在页面上可以看到的盒子。

• 外边距 margin

• 边框 border

• 填充（有时也翻译成内边距） padding

• 内容

在讲 margin 和 padding 的时候，曾用下面这张图阐述过四个不同部分的位置关系。

区块盒子（block boxes）和行内盒子（inline boxes）

CSS 盒模型整体上适用于区块盒子，行内盒子使用的只是盒模型中定义的部分行为。

具体的原因在之前介绍区块元素和内联元素曾简单介绍过，这里再来仔细看看。

display 属性实际定义了元素（盒子）的两种行为，一个是元素与其它元素之间的关系，也就是外部显示行为；另一个是元素内部元素之间的关系，也就是内部显示行为。

外部显示

当 display 属性值为 block 时，它的外部显示行为表现如下：

• 盒子会换行。

• width 和 height 属性值会生效。

• padding、border 和 margin 会将其它元素从当前盒子周围“推开”。这里“推开”是一种形象的说法，具体就是盒子与其它元素之间的距离增大（或减少）了。

• 如果不指定 width，盒子将占据容器可用空间的全部宽度。

当 display 属性值 为 inline 时，它的外部显示行为表现如下：

• 盒子不会换行。

• width 和 height 属性值不会生效。

• 垂直方向的 padding、margin 以及 border 会被应用，但不会把其他处于 inline 状态的盒子“推开”。

• 水平方向的 padding、margin 以及 border 会被应用，且会把其他处于 inline 状态的盒子“推开”。

内部显示

默认情况下，元素内的元素会以标准流的方式布局呈现，并表现为区块或行内盒子。

但可以通过 display 属性改变内部显示行为，例如，display 值为 flex，它的外部行为依然是 block，但内部显示行为则变成了 flex，也就是后面会提到的弹性盒子。

标准盒子模型和替代盒子模型

一个区块盒子由以下部分组成：

• 内部盒子：内容显示区域，使用 width 和 height 设置其大小。

• padding 盒子：填充内容周围的空白处，使用 padding 相关的属性值设置其大小。

• border 盒子：边框盒子包裹了任何内容和填充，使用 border 相关的属性值设置其大小。

• margin 盒子：最外层作为该盒子与其它盒子之间的空白，使用 margin 相关的属性值设置其大小。

标准盒子模型

.standard-box {   background-color: antiquewhite;   border: 5px solid green;   padding: 10px;   margin: 20px;   width: 200px;   height: 60px; }  .others {   background-color: lightblue; } 

定义了标准盒子的宽度为 200px，高度为 60px，同时定义了它的边框为 5px，外边距为 20px，填充为 10px。

<div class="others">其它盒子</div> <div class="standard-box">内容width:200px, height:60px</div> <div class="others">其它盒子</div> 

这时，整个盒子在页面布局中占据的空间，实际是宽度 200px + 10px + 10px + 5px + 5px + 20px + 20px。同样的，高度占据的空间高度也不只是内容的高度，而是要把填充，边框和外边距的占据的高度加到一起。

这是一个标准盒子在页面中占据空间的计算方式。

替代盒子模型

替代盒子模型则希望对于盒在网页中占据的空间计算方式不要那么复杂，直接使用 width 和 height 就能做到。

想要达成这样的呈现，需要做的事情如下：

html {   box-sizing: border-box; }  *, *::before, *::after {   box-sizing: inherit; } 

在 CSS 中设置 box-sizing 的值为 border-box，这样同样的代码，呈现的效果就和前面标准盒子不同。

整个盒子占据的宽度和高度就和内部的宽度和高度一样。

使用浏览器的开发者工具查看盒子模型

在 Chrome 浏览器里按住 F12，打开开发者工具。

然后选择到前面实现的盒子，可以看到如下：

上面是标准盒子在浏览器里看到盒子模型，下面是替代盒子模型，可以看到标注出来的数字方便我们清楚地知道它真实的宽度和高度。

总结

• 🍑 CSS 中的盒子模型，或盒模型，是 box model。它指的是我们把元素看成一个个盒子。

• 🍑 CSS 盒模型整体上适用于区块盒子，行内盒子使用的只是盒模型中定义的部分行为。

• 🍑 一个区块盒子由以下部分组成：内部盒子、padding 盒子、 border 盒子和 margin 盒子。