你真的了解“盒模型”吗？

阅读时间：6min

目标：学习盒模型的基本理论，了解盒装模型的工作原理，了解盒模型与替代模型的区别以及如何进行切换。

前置条件：HTML和CSS基础知识。

在 CSS 中，所有的元素都被一个个的“盒子（box）”包围着，理解这些“盒子”的基本原理，是我们使用CSS实现准确布局、处理元素排列的关键。

什么是CSS 盒模型?

完整的 CSS 盒模型应用于块级盒子，内联盒子只使用盒模型中定义的部分内容。模型定义了盒的每个部分 —— margin, border, padding, and content —— 合在一起就可以创建我们在页面上看到的内容。

盒模型的各个部分

CSS中组成一个块级盒子需要:

• **Content box**

这个区域是用来显示内容，大小可以通过设置 `width`和 `height`。

• **Padding box**

包围在内容区域外部的空白区域； 大小通过 `padding` 相关属性设置。

• **Border box**

边框盒包裹内容和内边距。大小通过 `border`相关属性设置。

• **Margin box**

这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 `margin`相关属性设置。

如下图：

Diagram of the box model

标准盒模型

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

img

假设定义了 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。

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

块级盒子 和 内联盒子

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

块级盒子的特性

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

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

内联盒子的特性

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

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

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

补充: 内部和外部显示类型

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

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

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

使用浏览器开发工具查案盒模型

您的 浏览器开发者工具可以使您更容易地理解box模型。如果您在Firefox的DevTools中查看一个元素，您可以看到元素的大小以及它的外边距、内边距和边框。这是一个很好的检查元素大小的方式，可以便捷的判断您的盒子大小是否符合预期 !

image-20210602185753877

学习有趣的知识，结识有趣的朋友，塑造有趣的灵魂！

大家好！我是〖编程三昧〗的作者 **隐逸王**，我的公众号是『编程三昧』，欢迎关注，希望大家多多指教！