盒子模型

假设您有以下这段 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-contentmin-content 关键字用于指示该框 宽度只等于其内容的固有最小宽度(即单词 “很棒”)。这样,文本框就能完美地围绕在文本周围。

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

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

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

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

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

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

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

盒模型的区域

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

<ph type="x-smartling-placeholder">
</ph> 显示框模型的四个主要区域的示意图:内容框、内边距框、边框和外边距框
框模型的四个主要部分:内容框、内边距框、边框和 页边距框。

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

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

滚动条位于内边距框中。

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

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

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

实用的类比

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

<ph type="x-smartling-placeholder">
</ph> 三个相框。
使用实体相框展示方框模型。

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

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

调试 Box 模型

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

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

  1. 打开开发者工具
  2. 选择一个元素
  3. 显示盒模型调试程序。
。 <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 项会填充可用的内嵌空间,而 inlineinline-block 元素的大小与其内容大小相同。

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

检查您的理解情况

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

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

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

260 像素
200 像素

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

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

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

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

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

比较内容框大小和边框大小调整的效果
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

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

资源

用户代理样式表