CSS 播客 - 001：Box 模型
假设您有这样一段 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 像素，并且会脱离您的元素。这是为什么？
Box 模型是 CSS 的核心基础。了解框模型的工作原理、CSS 的其他方面对它的影响，重要的是了解如何控制该模型，有助于您编写更具预测性的 CSS。
请务必注意，CSS 显示的所有内容都是框，即使只是一些文本或具有使其看起来像圆形的 border-radius。
内容和大小
框根据其 display 值、设置的尺寸及其包含的内容具有不同的行为。这些内容可以是纯文本，也可以是由子元素生成的更多框。无论选择哪种方式，默认情况下，内容都会影响框的大小。
您可以使用外部尺寸调整来控制它，也可以使用固有尺寸让浏览器根据内容大小来为您决定。
下面的基本演示说明了它之间的区别：
该演示在尺寸固定且带有粗边框的框中显示“CSS 太棒了”字样。由于框具有指定宽度，因此其大小可采用外部设置。这意味着，它可控制其子内容的尺寸。不过，“awesome”一词对于框来说过大，因此会溢出到父框的边框框之外（稍后会对此进行详细介绍）。防止出现此溢出的一种方法是，通过不设置宽度或在本例中将 width 设置为 min-content，让框本身可以调整大小。min-content 关键字指示框的宽度仅与其内容的最小固有宽度相同（即“awesome”一词）。这可以让框与文本完美契合。
下面是一个更复杂的示例，显示了不同尺寸对真实内容的影响：
开启和关闭固有尺寸，看看外侧尺寸如何为您提供更多控制，而外在尺寸和固有尺寸可赋予内容更多控制力。如要查看效果，请在卡片中添加几句文字。 如果此元素具有外部尺寸，则在溢出之前可以添加的内容数量存在限制，但当固有尺寸处于开启状态时，不会出现这种情况。
默认情况下，此元素都有一个 width 和 height 集，每个值均为 400px。这些尺寸对元素内的所有内容设定了严格的边界，除非内容过大，无法容纳方框。您可以通过将花朵图片下方的图片说明更改为超过该框高度的内容，来看看它的实际效果。
关键术语：如果内容太大，无法放入盒子，就会发生溢出。您可以使用 overflow 属性管理元素处理溢出内容的方式。
切换为固定尺寸后，浏览器会根据框的内容大小为您做出决定。这会使溢出的可能性大大降低，因为框会根据其内容调整大小。
请务必注意，固有大小是浏览器的默认行为，通常比外部大小提供更大的灵活性。
盒子模型的面积
方框由不同的方框模型区域组成，这些区域都执行特定工作。
内容框是内容所在的区域。内容可以控制其父级的大小，因此这通常是大小变化最大的区域。
内容框周围的内边距框是由 padding 属性创建的空间。由于内边距在框内，因此框的背景在其创建的空间中可见。
如果该框设置了溢出规则（例如 overflow: auto 或 overflow: scroll），滚动条也会占用此空间。
边框框环绕在内边距框周围，其空间由 border 值定义，而该值会为元素创建视觉框架。元素的边框边缘是您能看到的范围。
最后一个区域，即外边距框，它是框周围的空间，由框的 margin 规则定义。outline 和 box-shadow 等属性也会占用此空间，因为它们绘制在元素之上，不会影响框的大小。更改框的 outline-width（即 200px）不会改变边框边缘内的任何内容。
一个实用的类比
框模型理解起来比较复杂，因此我们把到目前为止您所了解的内容打个比方。
在此图中，您在墙上连续安装三个相框。加框图片的元素与框模型相对应，如下所示：
- 内容框就是艺术作品。
- 内边距框是白色安装板，位于框架和艺术作品之间。
- 边框是用来为艺术作品提供文字边框的框架。
- 外边距框是指帧之间的间距。
- 阴影占用的空间与外边距框相同。
调试框模型
浏览器开发者工具直观地呈现了选定框模型计算的结果，可帮助您了解框模型的工作原理及其对您正在访问的网站的影响。
请在您自己的浏览器中尝试此操作：
控制框模型
如需了解如何控制框模型，您首先需要了解浏览器中的情况。
每个浏览器都会将用户代理样式表应用于 HTML 文档，以定义元素在未指定 CSS 时的外观和行为。用户代理样式表中的 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有多宽？
box-sizing: border-box，则 200px 是正确的。此框的实际宽度为 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 值时，蓝色区域会显示框内正在应用的 CSS。
*,
*::before,
*::after {
box-sizing: border-box;
}
此 CSS 规则会选择文档中的每个元素以及每个 ::before 和 ::after 伪元素，并应用 box-sizing: border-box。这意味着，每个元素现在都使用以下备用框模型。
由于备用框模型的可预测性更高，因此开发者通常会将此规则添加到重置和归一化器中，比如这个规则。