盒子模型

CSS 播客 - 001：盒模型

假设您有以下这段 HTML 代码：

<p>I am a paragraph of text that has a few words in it.</p>

然后，为它编写以下 CSS：

p {
  width: 100px;
  height: 50px;
  padding: 20px;
  border: 1px solid;
}

内容最终的宽度为 142 像素，而非您指定的 100 像素， 元素会失去响应这是为什么？

盒子模型是 CSS 的核心基础。了解 Box 模型是如何构建的 它如何受 CSS 其他方面的影响 如何控制数据，可帮助您编写更可预测的 CSS。

请务必注意，CSS 显示的所有内容都是一个方框，即使 只是一些文本，或者有一个 border-radius 使其看起来像一个圆形。

内容和大小

Box 的 display 值及其集合具有不同的行为 尺寸及其包含的内容该内容可能是纯文本，也可能是 子元素生成的更多框。无论哪种情况，内容都会影响 默认处于启用状态

您可以使用外部大小调整来控制此设置，也可以使用固有大小进行控制 让浏览器根据内容大小做出决定。

以下基本演示可说明不同之处：

演示中有“CSS is awesome”字样在一个具有固定尺寸的盒子里 粗边框由于该框有指定宽度，因此会调整其尺寸。 这意味着，它可以控制其子内容的尺寸。不过， “棒极了”对框而言过大，因此溢出了父框的 边框（稍后会对此进行详细介绍）。防止这种溢出的一种方法是 可以通过不设置宽度或在本例中 将 width 设为 min-content。min-content 关键字用于指示该框 宽度只等于其内容的固有最小宽度（即单词 “很棒”）。这样，文本框就能完美地围绕在文本周围。

下面是一个更复杂的示例，展示了不同尺寸对真实客户的影响 内容：

开启和关闭固有大小，了解外部大小如何为您提供更多好处 通过外在尺寸和固有尺寸进行控制可让内容 控制。要查看具体效果，请在卡片中添加几句文字。 如果此元素有外部尺寸，则您对 可以在溢出之前添加，但当固有大小 。

默认情况下，此元素有一组 width 和 height，每个值均为 400px。 这些尺寸严格限定了元素内的所有内容， 除非内容过大，否则不会保存在该框中。您可以看到这一操作的实际效果 将花朵图片下面的图片说明改为 框的高度。

关键词：当内容太大，并不适合放入其中的盒子时，就会出现溢出。您可以 使用 overflow 属性管理元素处理溢出内容的方式。

切换为固有尺寸可让浏览器根据以下因素为您做出决策： 框的内容大小。这会大大降低溢出的可能性，因为 根据其内容调整大小。

请务必注意，固有大小是浏览器的默认大小 行为，并且通常比外在大小调整提供更大的灵活性。

盒模型的区域

框由多个不同的框模型区域组成，每个区域都执行特定任务。

</ph>

内容框是内容所在的区域。内容 可控制其父项的尺寸，因此该区域通常是大小变化最大的区域。

内边距框是围绕内容框的 padding 属性。 由于内边距位于框内，因此框的背景在空间中可见 资源。 如果框中设置了溢出规则，例如 overflow: auto 或 overflow: scroll，滚动条也会占用此空间。

边框会环绕边框，其空间由 border 值， 用于为元素创建一个视觉框架。元素的边框 看的有限。

最后一个区域是外边距框，也就是框周围的空间，由 margin 规则。媒体资源，例如 outline和 box-shadow 会占据该空间，因为它们绘制在元素的上层， 影响框的大小。正在更改您盒子的outline-width（共 200px） 框不会改变边框边缘内的任何内容。

实用的类比

框模型理解起来很复杂，因此我们用这里的比喻 模型。

</ph>

在此图中，你有三个相框相邻地装在 效果。框架图像的元素与方框模型相对应，如下所示：

• 内容框是艺术作品。
• 衬垫盒是位于画框和艺术作品之间的白色安装板。
• 边框是边框，可为图片提供文字边框。
• 外边距框是指帧之间的空间。
• 阴影占据的空间与外边距框相同。

调试 Box 模型

浏览器开发者工具直观呈现了所选框的框模型 这有助于您了解框模型的工作原理 会影响您制作的网站

在您的浏览器中尝试以下操作：

1. 打开开发者工具。
2. 选择一个元素。
3. 显示盒模型调试程序。

控制 Box 模型

要了解如何控制框模型，首先需要了解 是在浏览器中进行的

每个浏览器都会将用户代理样式表应用到定义 元素在未定义 CSS 的情况下应具有的外观和行为。采用 Google Cloud 技术的 CSS 用户代理样式表因浏览器而异，但它们可提供 默认设置为便于阅读内容。

用户代理样式表有一个属性用于设置框的默认 display。对于 例如，在普通流中，<div> 元素的默认 display 值为 block，<li> 的默认 display 值为 list-item，并且 <span> 默认 display 值为 inline。

inline 元素设有块外边距，但其他元素不遵循此限制条件。 使用 inline-block 时，其他元素遵循块外边距，但第一个 元素保留了其与 inline 元素相同的大部分行为。 默认情况下，block 项会填充可用的内嵌空间，而 inline 和 inline-block 元素的大小与其内容大小相同。

用户代理样式表还设置了 box-sizing，告知框如何 计算它的盒子大小。默认情况下，所有元素都具有以下用户代理 样式：box-sizing: content-box;。也就是说，如果您将维度设置为 为 width 和 height，这些尺寸适用于内容框。如果您 然后设置 padding 和 border，这些值会添加到内容框的 。

检查您的理解情况

测试您对盒子模型大小影响属性的知识的了解。

.my-box {
  width: 200px;
  border: 10px solid;
  padding: 20px;
}

此框的实际宽度为 260 像素。 由于 CSS 使用默认 box-sizing: content-box，因此应用的宽度为 内容的宽度，并将两侧的 padding 和 border 添加到 这一点。内容宽度为 200 像素 + 内边距为 40 像素 + 边框大小为 20 像素 可见宽度为 260 像素

您可以通过指定 border-box 大小来更改此设置：

.my-box {
  box-sizing: border-box;
    width: 200px;
    border: 10px solid;
    padding: 20px;
}

此备用框模型会告知 CSS 将 width 应用于边框框 而不是内容框。这意味着，我们的 border 和 padding 会 推送入，所以当您将 .my-box 设置为 200px 宽度时，它实际上会呈现 宽度为 200px。

请观看以下互动式演示，了解其工作原理。切换 box-sizing 值，蓝色区域表示当前在 方框。

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

此 CSS 规则会选择文档中的每个元素 以及每个 ::before 和 ::after 伪元素，并应用 box-sizing: border-box。 这意味着，每个元素现在都使用此备用框模型。

由于替代框模型的预测性更高，因此开发者通常会添加 重置和标准化规则，就像这个一样。

资源

• 盒模型简介
• 什么是浏览器开发者工具？

用户代理样式表

• Chromium
• Firefox
• Webkit