感谢您关注 Google I/O 大会！观看点播内容。

此页面由 Cloud Translation API 翻译。

盒子模型

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 的箱体模型有助于您找出元素放不下。

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

内容和大小

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

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

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

如果包装盒具有外部尺寸，限制可添加的内容量。这使得“很棒”一词溢出。

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

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

通过采用固有大小，您可以控制元素。固有大小可防止文本溢出。

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

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

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

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

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

盒模型的区域

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

显示框模型的四个主要区域的示意图：内容框、内边距框、边框和外边距框 — 框模型的四个主要部分：内容框、内边距框、边框和页边距框。

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

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

滚动条位于内边距框中。

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

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

较宽的轮廓不会影响元素其余部分的尺寸。

实用的类比

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

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

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

调试 Box 模型

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

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

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

。 <ph type="x-smartling-placeholder">

</ph>

大纲演示中的方框模型调试程序。

控制 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;
}

您认为.my-box的宽度是多少？

200 像素

由于 box-sizing 的默认值为 content-box、内边距和宽度上添加边框。如果200px 框中有 box-sizing: border-box。

260 像素

默认的框大小是 content-box，这意味着内边距和为整个框添加边框。

此框的实际宽度为 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。这意味着，每个元素现在都使用此备用框模型。

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