导入
在浏览器中预览盒模型
了解盒模型以及如何在浏览器中预览它。
盒模型是理解 CSS 的一个关键概念。当浏览器在屏幕上渲染元素时，始终使用盒模型来计算元素的外观。
盒模型如此重要，以至于现代浏览器的开发者工具都提供了一个特殊预览功能。该预览会显示你通过开发者工具检查器查看的每个 HTML 元素的相关信息。
概述
假设我们有一段内容，例如屏幕上显示的文字“This is how”。
当然，这段内容可以是任意其他文字，甚至可以是一张图片。
无论是文字还是图片，我们都将其称为 内容。
在我们网页上的一段内容的实际示例中，我们看到的是文字“This is how”。
当用户访问网页时，他们会看到这段内容：“This is how。”
但如果我们使用浏览器的开发者工具进行检查，可以看到它的结构如下：
...
Google Chrome 中元素的盒模型
注意上图右下角的盒子。从内到外阅读这个盒子，我们可以看到：
- 蓝色区域是实际内容。
- 绿色区域是内边距（padding）。
- 浅橙色区域是边框（border）。
- 深橙色区域是外边距（margin）。
因此，我们可以得出结论：所有 HTML 元素都具有以下 CSS 属性：
- 内容区
- 内边距
- 边框
- 外边距
...
盒模型
要快速预览浏览器中的盒模型，可以按照以下步骤操作：
- 按下 “CTRL+T” 打开新标签页。
- 标签页打开后，按下 “F12” 键。
- 按下 “CTRL+SHIFT+C” 启用元素检查器。
- 将鼠标悬停在网页上的某个元素上。
- 确保“Elements”选项卡已打开。
- 在“Styles”子选项卡中，你会看到盒模型的图形化展示。
在 macOS 系统上，可按以下步骤操作：
- 按下 “Command+T” 打开新标签页。
- 标签页打开后，按下 “Option+Command+I” 或 “Fn+F12” 打开开发者工具。
- 按下 “Option+Command+C” 启用元素检查器。
- 将鼠标悬停在网页上的某个元素上。
- 确保“Elements”选项卡已打开。
- 在“Styles”子选项卡中，你会看到盒模型的图形化展示。
接下来，我们通过一些巧妙的样式设计，在示例页面上重现盒模型的效果。
使用 CSS 可视化模拟盒模型
以下是对应的 HTML、CSS 代码及运行结果：
No configuration found for ID: 263833de1260caa7b491dda3d2a6f1fabf7b7515e0d0e4772db2379900e13ed4
在上述代码中，我们在 CSS 中将 <span> 标签的 display 属性设置为 inline-block。
display 属性可以取值为 inline-block，这是一种介于行内元素和块级元素之间的混合类型。其工作方式如下：
- 它像行内元素一样，不会占据父元素的 100% 宽度。
- 它又像块级元素一样，能够正确地显示外边距。