CSS 盒子尺寸模块第3级

1. 引言

本节内容为非规范性。

CSS 布局中有多种自动尺寸的概念，它们在各种布局计算中被使用。本节定义了一些更为精确的术语， 以帮助将本规范的布局行为与其他模块中的计算关联起来，此外还为宽度和高度属性提供了一些新的关键字， 允许作者为元素分配这些尺寸计算所产生的尺寸。

本规范需要插图！请参见 相关问题。

1.1. 模块交互

本模块扩展了宽度、高度、最小宽度、最小高度、最大宽度、最大高度，以及 列宽特性，这些特性在[CSS2]第10章和[CSS3COL]中定义。

本模块中定义的盒子尺寸属性的定义取代了[CSS-UI-3]中的定义。

1.2. 值的定义

本规范遵循CSS属性定义约定，使用来自[CSS-VALUES-3]的值定义语法。本规范中未定义的值类型在CSS Values & Units中定义。

除各属性定义中列出的特定值外， 本规范定义的所有属性还接受CSS全局关键字作为其属性值。为便于阅读，这些值未被重复列出。

2. 术语

与坐标轴和尺寸相关的一些关键术语在CSS书写模式3§ 6抽象盒子术语中定义。

尺寸

一维或二维的测量值： 一个块尺寸和/或行内尺寸； 或者是宽度和/或高度。

内尺寸

盒子的内容框尺寸。

外尺寸

盒子的外边距框尺寸。

确定的尺寸

无需执行布局即可确定的尺寸； 即长度值、文本的测量值（不考虑换行）， 初始包含块的尺寸，或者一个百分比值或其他公式。

此外，绝对定位元素的包含块的尺寸总是确定的。

不确定的尺寸

一个不确定的尺寸。无限大小的不确定可用空间是无限的。

可用空间

表示一个盒子布局时的可用空间， 由它所参与的格式化上下文的规则决定。 对于一个盒子，可用空间通常是它的包含块的尺寸， 或者是无限大小（如果是未确定的尺寸）。

拉伸适配

拉伸适配到给定尺寸时， 是指减去盒子的计算边距（不折叠，auto作为零处理）、 边框和填充后的尺寸。

回退尺寸

某些尺寸算法不适合无限大小。在这些情况下，使用回退尺寸。 除非另有说明，回退尺寸是初始包含块的尺寸。

2.1. 自动框大小

在CSS中，有四种自动确定的大小类型 （根据上下文，大小来自于 自动 的尺寸规则）：

拉伸适合大小

拉伸适合内联大小

拉伸适合块大小

大小 是一个框在其 外部大小 填充了 可用空间 的情况下会占据的空间； 换句话说，拉伸适合 到 可用空间， 如果该空间是 确定的。 如果 可用空间 是 不确定的，则无法定义。

注意：对于 内联轴，这一大小在 CSS2.1§10.3.5 中被称为“可用宽度”，并按 CSS2.1§10.3.3 的规则计算。

注意：涉及此大小的计算需要指定当 可用空间 是 不确定的 时的回退行为。

最大内容大小

当有无限可用空间时，一个框在给定轴上的“理想”大小。 通常，这是框在该轴上能够容纳内容的最小大小， 也就是在避免溢出的同时，最小化未填充空间。

最大内容内联大小

该框在 大小 的 内联轴上的“理想”大小。 通常，这是框在其内容周围能容纳的最窄 内联大小， 如果没有使用框中的任何软换行机会。 （参见 § 5 内在大小确定。）

注意：在 CSS2.1§10.3.5 中，这称为“首选宽度”，在 CSS2.1§17.5.2.2 中称为“最大单元格宽度”。

最大内容块大小

该框在 大小 的 块轴上的“理想”大小。 通常是内容布局后的 块大小。

最小内容大小

名义上，框能够采取的最小 大小， 而不会导致可以通过选择更大 大小 避免的溢出。 正式来说，框在 最小内容约束 下的大小， 详见 § 5 内在大小确定。

最小内容内联大小

在 最小内容大小 的 内联轴。 通常是容纳其内容所需的 内联大小， 如果使用了框中的所有软换行机会。

注意：在 CSS2.1§10.3.5 中，这称为“首选最小宽度”，在 CSS2.1§17.5.2.2 中称为“最小内容宽度”。

最小内容块大小

在 最小内容大小 的 块轴。 对于 块容器、表格和 内联框， 这等同于 最大内容块大小。

适应内容大小

适应内容内联大小

适应内容块大小

如果给定轴上的 可用空间 是 确定的， 那么大小等于 clamp(最小内容大小, 拉伸适合大小, 最大内容大小) （即 max(最小内容大小, min(最大内容大小, 拉伸适合大小))）。 当在 最小内容约束 下调整大小时，等于 最小内容大小。 否则，等于该轴上的 最大内容大小。

注意：这在 CSS2.1§10.3.5 和 CSS 多列布局 § 3.4 中被称为“收缩以适应”宽度。

内在大小

最大内容大小 或 最小内容大小， 即主要来自内容大小的尺寸。 （该术语的一些用法可能也指从这两种大小之一派生的尺寸。）

替换元素 通常从其 自然尺寸 派生出其 内在大小。

2.2. 内在尺寸贡献

最大内容贡献

一个框对其 包含块 的 最大内容大小 做出的贡献。

最小内容贡献

一个框对其 包含块 的 最小内容大小 做出的贡献。

内在尺寸贡献

最大内容贡献、最小内容贡献 或基于内容的类似计算的尺寸贡献。

内在尺寸贡献基于框的 外部大小； 在此情况下，自动 边距被视为零。

2.3. 内在尺寸约束

最大内容约束

框的 包含块 施加的尺寸约束，导致其产生 最大内容贡献。

最小内容约束

框的 包含块 施加的尺寸约束，导致其产生 最小内容贡献。

首选宽高比

一个框固有的宽高比， 使得各种尺寸算法倾向于生成与该宽高比一致的尺寸， 尽可能在遵守其他尺寸输入的同时。 除非另有说明， 框的 首选宽高比 是其 自然宽高比，如果它有的话， 并且该宽高比应用于其 内容框。 大多数框没有 首选宽高比。

3. 指定框大小

3.1. 尺寸属性

本节定义了 尺寸属性，包括 宽度、高度、最小宽度、最小高度、最大宽度 和 最大高度。 它们的潜在值将在下一节定义，参见 § 3.2 尺寸值: <length-percentage>、auto | none、min-content、max-content 和 fit-content() 值。

注意：附加的 流相对 别名定义在 [CSS-LOGICAL-1] 中。

我们希望为每对尺寸属性定义简写 （例如 宽度 和 高度） 但由于与 @page 大小 描述符 [CSS-PAGE-3] 存在命名冲突， 因此已推迟到第4级。 欢迎提出如何解决此问题的建议，详见 讨论。

3.1.1. 首选尺寸属性: 宽度 和 高度 属性

宽度 和 高度 (物理) 属性指定了框的 首选 宽度 和 高度。

3.1.2. 最小尺寸属性：最小宽度 和 最小高度 属性

min-width 和 min-height 属性分别指定了 框的 最小宽度 和 最小高度。

注意： auto 作为初始值是新的； 在 [CSS2] 中，初始值为零。

3.1.3. 最大尺寸属性：最大宽度 和 最大高度 属性

max-width 和 max-height 属性分别指定了 框的 最大宽度 和 最大高度。

3.2. 尺寸值: <length-percentage>, auto | none, min-content, max-content, 和 fit-content() 值

<length-percentage>

使用 <length> 和/或 <percentage> 指定框的大小。 box-sizing 属性指示是测量 内容框 还是 边框框。

百分比根据框的 包含块 的宽度/高度进行解析。 如果在某一轴上，包含块 的大小取决于框的大小， 请参阅相关的布局模块，了解如何解析百分比的特殊规则。

负值无效。

auto

对于 宽度 或 高度，指定一个 自动大小。 有关如何计算此值，请参阅相关的布局模块。

对于 min-width 或 min-height， 指定一个 自动最小大小。 除非相关的布局模块另有规定， 否则解析为 0 的已用值。 为了向后兼容， 此关键字的解析值为零，适用于所有 [CSS2] 的 块和内联框、内联块及所有表格布局框。 当没有生成框时，它的解析值也为零。

none

对框的大小没有限制。

min-content

使用相关轴上的 最小内容大小； 对于框的 块大小， 除非另有规定， 否则这等同于其 自动大小。

max-content

使用相关轴上的 最大内容大小； 对于框的 块大小， 除非另有规定， 否则这等同于其 自动大小。

fit-content(<length-percentage>)

使用适应内容公式，将 可用空间 替换为指定的参数， 即 min(最大内容, max(最小内容, <length-percentage>))， 其中 <length-percentage> 参数的解析方式与独立的 <length-percentage> 值完全相同。

负 <length-percentage> 值无效。

在所有情况下，已用值将取底以保持非负的 内部大小。

注意： 最小内容，最大内容 和 fit-content() 值是第三级中的新特性。

注意： flex-basis 属性也因此获得了这些新关键字， 因为它的值是通过引用 <宽度> 来定义的。

注意： 本节之前定义了 stretch 和 fit-content 作为分别表示 拉伸适合大小 和 适应内容大小 的关键字。 这些关键字已被推迟到第四级， 以便更好地处理在 不确定 的 可用空间 情况下的影响。

3.2.1. “表现为 auto”

为了有一个通用术语来描述当 width/height 计算为 auto 时，或当其被定义为表现得像指定了 auto 一样的情况 （如在 块百分比高度 解析为不确定大小的情况， 参见 CSS2§10.5）， 可以说该属性在这两种情况下都 表现为 auto。

注意： 定义布局行为的传统规范文本，特别是在 [CSS2] 中， 可能会明确提到 width/height 具有 auto 的计算值作为条件； 其中一些情况应被解释为 表现为 auto， 并报告给 CSSWG 以进行更新。

将此部分替换为对新术语 自动大小 的引用。

3.2.2. 包含或排除浮动

本节为非规范性内容。

虽然 块级盒子 的边界通常允许浮动元素穿透， 但有时作者需要它们包含自己的（后代）浮动元素 或排除外部浮动元素。 对于块布局， 指定 display: flow-root 会使该盒子成为一个 格式化上下文的根节点， 该节点具备这种行为。

注意： 参与 Flex、Grid 或 Table 布局的盒子会自动具有这种行为。

3.3. 框的尺寸边界：box-sizing 属性

box-sizing 属性定义了固定尺寸（例如 <length> 和 <percentage>）是分配给 内容框 还是分配给 边框框的。 它影响了所有 尺寸属性 的解释， 包括 flex-basis。

值的含义如下：

content-box

在 尺寸属性 中指定的尺寸作为 <length-percentage> 表示框的 内部尺寸， 不包括边距、边框和填充： 它们应用于 内容框。 盒子的填充和边框 布局和绘制在指定的 宽度 和 高度的外部。

注意： 这是 CSS2.1 中指定的宽度和高度的行为， 因此是默认值。

border-box

在 尺寸属性 中指定的尺寸作为 <length-percentage> 表示框的 可视尺寸， 包括边框和填充（但不包括边距）： 它们应用于 边框框。 盒子的填充和边框 布局和绘制在指定的 宽度 和 高度 的内部， 而 内容框 的尺寸填充剩余空间， 向零取底。

内容的宽度和高度通过从指定的 <length-percentage> 中减去各自边的边框和填充宽度来计算。 由于内容的宽度和高度 不能为负， 该计算结果向零取底。

使用的值，如通过 getComputedStyle() 获取的值， 也指边框框。

box-sizing 影响的值包括 原始的 <length-percentage> 值 以及那些用于功能表示法的值，如 fit-content()。 相比之下， 非定量的值，如 auto 和 min-content 不受 box-sizing 属性影响 （除非另有说明）。

.box {
  box-sizing:   content-box; /* 默认 */
  width:        100px;
  padding-left: 10px;
  border-left:  10px solid;
}

.box {
  box-sizing:   border-box;
  width:        100px;
  padding-left: 10px;
  border-left:  10px solid;
}

.box {
  box-sizing:   border-box;
  width:        100px;
  padding-left: 60px;
  border-left:  60px solid;
  /* padding + border = 120px */
}

div.container {
  width:38em;
  border:1em solid black;
}

div.split {
  box-sizing:border-box;
  width:50%;
  border:1em silver ridge;
  float:left;
}

<div class
            ="container">
<div class
            ="split">
            这个 div 占据左半边。</div>
<div class
            ="split">
            这个 div 占据右半边。</div>
</div>

注意： 某些 HTML 元素， 例如 button， 默认采用 border-box 行为。 有关具有此行为的元素的详细信息，请参阅 HTML。

在传统 CSS 规范中， 宽度、高度、最小宽度（min）、最小高度（min）、最大宽度（max） 和 最大高度（max） 通常指的是 内部 尺寸 （内容框 尺寸） 除非另有说明。

请参考 CSS 用户界面 3 § 3.1 更改盒模型：box-sizing 属性，以明确区分这些术语 在 视觉格式化模型细节 部分中的 [CSS2]。

3.4. 新的列宽值：min-content，max-content，以及 fit-content() 值

当用作 column-width 的值时， 新的关键字指定了最佳列宽：

min-content

将最佳列宽指定为多列容器内容的 min-content 行内大小。

max-content

将最佳列宽指定为多列容器内容的 max-content 行内大小。

fit-content(<length-percentage>)

将最佳列宽指定为 min(max-content size, max(min-content size, <length-percentage>))

注意： 列宽永远不会因列而异。 当列宽受到多列容器内容的影响（如上面的关键字）时， 所有内容都被考虑在内， 计算出的宽度由所有列共享。

4. 外部尺寸确定

外部尺寸 根据元素的上下文来确定尺寸， 而不考虑其内容。

4.1. 百分比尺寸

百分比指定了一个框的尺寸相对于该框的 包含块。

<article
                style="height: 60em"
                >
  <figure
                style="height: 50%;"
                >
    <img
                style="height: 50%;"
                >
  </figure
                >
</article>

请参见 § 5.2.1 百分比大小框的固有贡献 了解当 包含块 的大小依赖于其内容的大小时，如何解析百分比。

5. 内部尺寸确定

内部尺寸 根据元素的内容确定尺寸， 而不考虑其上下文。

5.1. 内部尺寸

每个轴的 min-content 尺寸 是 如果它是一个浮动元素，在该轴上给定 auto 尺寸时的大小 （在该轴上没有 最小 或 最大尺寸） 且其包含块在该轴上为 零 大小。 （换句话说，作为“收缩适应”时的最小尺寸。）

每个轴的 max-content 尺寸 是 如果它是一个浮动元素，在该轴上给定 auto 尺寸时的大小 （在该轴上没有 最小 或 最大尺寸）， 并且其包含块在该轴上为 无限 大小。 （换句话说，作为“收缩适应”时的最大尺寸。）

min-content 尺寸 和 max-content 尺寸 统称为 内部尺寸。

注意： 当框具有 优先宽高比 时， 反方向的尺寸约束会传递并可能影响 在所考虑的尺寸中 auto 尺寸。 参见 CSS2§10。

本规范不定义如何确定浮动元素的尺寸。 请参考 [CSS2]。 然而，内部尺寸 的 替换元素（不带 自然尺寸）定义如下：

如果它具有 优先宽高比：

对于 min-content 尺寸，使用 零。

对于 max-content 尺寸：

• 如果 可用空间 在 确定的 行内轴 中， 使用在该尺寸中 拉伸适应 的值作为行内尺寸，并使用宽高比计算块尺寸。

• 否则，如果框的 <length> 作为其 计算值 用于 min-width 或 min-height， 使用该尺寸并计算另一个维度的宽高比； 如果两个维度都有一个 <length> 最小值， 选择导致更大整体尺寸的那个。

  注意： 此情况之前是从 300x150 的默认尺寸计算的， 而不是框的最小尺寸。 这被认为是一种更好的行为， 并可能与 Web 兼容， 但如果有任何问题，请向 CSSWG 反馈。

• 否则，使用与 行内尺寸 匹配 初始包含块的相应维度，并使用宽高比计算另一个维度。

如果没有 优先宽高比：

对于 min-content 尺寸 和 max-content 尺寸：

• 如果框的 <length> 作为其 计算 最小尺寸（min-width/min-height）在该维度上， 使用该尺寸。

  注意： 这种作者可控的行为是通过新的 auto 值实现的，用于 最小尺寸属性。 这被认为是一种更好的行为， 但尚不清楚它是否与 Web 兼容， 所以如果有任何问题，请向 CSSWG 反馈。

• 否则， 使用 300px 作为宽度 和/或 150px 作为高度 根据需要。

由于一个块级或行内级的替换元素 其 高度 或 宽度 行为为 auto 实际上被定义为使用其 max-content 尺寸 （CSS2§10.3.2）， 本规范将上述规则应用于未定义的替换元素情况 其 高度 和 宽度 均 行为为 auto。

注意： 本规范不定义如何确定 浮动元素的大小。 请参考 [CSS2]， 相关 CSS 规范或现有实现 获取进一步的细节。 将来会有规范详细定义这一点， 替代 CSS2 的“定义”， 如其所示。

虽然文本输入控件的 auto 尺寸，例如 HTML 的 <input type=text> 和 <textarea> 元素 通常是固定尺寸， 但这些元素的内容可以用于确定基于内容的 内部尺寸， 类似于非替换块容器。 因此 min-content 和 max-content 关键字 在 尺寸属性 中 代表了基于内容的尺寸 对于将其值作为文本呈现的表单控件， 允许这些控件根据可见内容的大小进行调整 类似于常规非替换元素。

在这种情况下，内容被定义为输入控件的值 （在 原始值 的情况下 textarea， 或在 值 的情况下 input）， 可能转化为更易读和/或本地化的显示格式， 然后被视为输入控件的子 文本运行， 只允许在输入控件实际允许换行的地方出现 软换行机会 （无论是由 CSS 属性触发还是其他用户代理内部约束）。 如果输入控件有指定的占位符文本 以覆盖其值显示区域， 则该文本也会被计算在内，以计算基于内容的大小——无论占位符文本此时是否可见。 （因此输入控件的基于内容的 内部尺寸 是适合占位符文本的尺寸和适合值的尺寸中的较大者。）

用户代理可能会对表单控件的 min-content 和 max-content 尺寸 强制执行一个最小值 （例如，包含单个零宽字符所需的尺寸， 或触控目标的最小可用尺寸） 以确保足够的空间供光标使用 并保持表单控件的可用性。

注意： 这可能会扩展到 iframe 或其他包含内容的替换元素 （见 讨论）， 但文本输入是一个主要用例； 并且是文档内部的，具有最少的附加复杂性。

5.2. 内在贡献

一个盒子在每个轴上的 最小内容贡献/最大内容贡献 是一个假设的 auto 尺寸浮动盒子的内容盒子大小，该浮动盒子仅包含该盒子本身，如果该假设浮动盒子的包含块是零大小或无限大小。

注意： 本规范没有精确定义如何确定这些尺寸。请参考 [CSS2]，相关 CSS 规范、处理百分比的规则（见下文）和/或现有实现以获取更多详细信息。

5.2.1. 百分比大小盒子的内在贡献

有时，百分比大小盒子的 包含块 的大小取决于该盒子的 内在尺寸贡献，这会创建一个循环依赖。在计算这样的盒子的 内在尺寸贡献（包括任何基于内容的 自动最小尺寸 的计算）时，解析为与同一轴上的 内在尺寸贡献 相对应的大小的百分比值（一个 循环百分比大小）会特别处理：

1. 如果该盒子是 非替换 的，那么任何指定为包含百分比表达式的 **最大尺寸属性** 或 **首选尺寸属性** （例如 `width`、`max-width`、`height`、`max-height`）的整个值，如果是 **循环** 的，在计算盒子的 **内在尺寸贡献** 时仅视为该属性的 **初始值**。例如，给定一个盒子，其 `width: calc(20px + 50%)`，它的最大内容贡献计算为其 `width` 似乎是 **auto**。 （然而，在实际尺寸计算中，百分比按通常方式处理；见下文。）
2. 同样，如果该盒子是 替换 的，那么任何指定为包含百分比表达式的 **最大尺寸属性** 或 **首选尺寸属性** 的整个值，如果是 **循环** 的，在计算盒子的 **最大内容贡献** 时，仅视为该属性的 **初始值**。
3. 如果该盒子是 替换 的，任何指定为包含百分比的 **最大尺寸属性** 或 **首选尺寸属性** （`width`、`max-width`、`height`、`max-height`）在计算 **最小内容贡献** 时解析为零。 （请参见 § 5.2.2 可压缩替换元素 了解在 HTML 中适用的元素列表。） 如果该盒子也具有 首选纵横比，则该 最小内容贡献 受限于来自相反轴的任何 <length-percentage> **最小尺寸**—将任何这样的百分比解析为零—通过 首选纵横比 进行传递。

   我们是否应该在传递前将传递的百分比解析为其包含块，而不是零？请参见 讨论。

   用户代理还可以根据 UI 考虑因素，如确保某些 UI 元素可见，来进一步限制 最小内容贡献 （例如，选择框的下拉箭头）。

   注意： 该 最小内容贡献 一如既往地 受到其自身轴上的 最小尺寸 的限制。

   该规则还适用于计算基于内容的 自动最小尺寸 或其相应的尺寸贡献，产生一个 确定的 “指定尺寸建议”。

   例如，一个 input 被分配 width: calc(50% + 50px)，具有 最小内容贡献 为 50px， 以及任何水平边距/边框/填充。
4. 对于 最小尺寸属性， 以及 边距 和 填充 （和 间隔）， 在确定 内在尺寸贡献 时，任何循环百分比都会解析为零。

然后，除非另有说明，在计算包含块的 **内容** 的使用尺寸和位置时：

• 如果循环依赖是由于包含块上的 **block-size** 或 **max-block-size** 引入的，导致其依赖于内容的大小，则盒子的百分比不被解析，而是 表现为 auto。

  注意： 网格项 和 弹性项 允许在这种情况下解析百分比。

• 否则，百分比的解析是基于包含块的大小。 （包含块的大小不会基于盒子的结果大小重新解析；因此，内容可能会溢出或不足包含块）。

注意： 这些规则指定了该循环情况下之前未定义的行为，见 CSS2§10.2，CSS2§8.3， 和 CSS2§8.4。此外， CSS2§10.5 中的行为在其各自的布局模式规范中被取代（例如 弹性布局）， 这些在 CSS2 中并未描述。

<article style="width: min-content">
  <aside style="width: 50%;">
  LOOOOOOOOOOOOOOOOOOOONG
  </aside>
</article>

<article style="height:auto">
  <aside style="height: 50%;">
    <div class=block style="height: 150px;"></div>
  </aside>
  <section style="height: 30px;"></section>
</article>

<article style="height:100px; min-height: min-content;">
  <aside style="height: 50%;">
    <div style="height: 150px;"></div>
  </aside>
  <section style="height: 30px;"></section>
</article>

<article style="height:auto; min-height: min-content;">
  <aside style="height: 50%;">
    <div class=block style="height: 150px;"></div>
  </aside>
  <section style="height: 30px;"></section>
</article>

<article style="height:100px; min-height: min-content;">
  <aside style="height: 200%;">
    <div style="height: 150px;"></div>
  </aside>
  <section style="height: 30px;"></section>
</article>

5.2.2. 压缩替换元素

除了在 替换元素 中列出的 HTML§14.4 [HTML]， 以下 HTML 元素也被视为替换元素，用于上述基于百分比的替换元素规则， 并且可以在其宽度/高度或最大宽度/最大高度以循环百分比大小表示时，其最小内容贡献会被压缩：

• input 具有任何 type 但不是“按钮类”的类型； 这可能因用户代理而异。

  在特定的用户代理中，类型被认为是“按钮类”，如果它显示类似于 button 元素， 它可以包含实际内容，这些内容决定了元素的布局。 在大多数用户代理中，“button”、“reset”、“submit”和“color”类型被视为按钮类； “file”类型在某些用户代理中也部分被视为按钮类， 当它显示为文本输入（可缩小）和按钮（按钮类，因此不可缩小）的组合时。

• select， textarea， progress， meter， marquee。

跟踪在 问题 6348 中将此应用于最大宽度/高度的网页兼容性和实施进度。 [问题 #6348]

变更

最近的变更

自 2020年12月18日的工作草案 以来的变更包括：

• 修复了替换元素在 § 5.1 内在尺寸 中最大内容尺寸定义中的各种错误。 （问题 6072）
• 添加了缺失的声明，将 最小内容约束 添加到 适合内容大小 的定义中。
• 将替换元素的“内在”尺寸重命名为“自然”尺寸 以避免与内在尺寸 混淆（见 问题 4961）。
• 进行各种其他小的编辑修复和改进。

自 2019年5月22日的工作草案 以来的主要更改包括：

• 定义了 min-content 和 max-content 不一定表现为属性的初始值 如果另有规定（通过相关的布局模块）。 （问题 3973）
• 切换了适合内容的内在贡献，fit-content() 将其参数视为 该参数单独的处理 进行内在贡献计算 并相应解析适合内容公式， 而不是在计算内在贡献时对 fit-content() 解析有特殊行为。 （问题 3731）
• 更改了替换框的 最大内容大小 没有内在大小 使用其最小大小， 仅在其为 <length> 时， 见 § 5.1 内在尺寸。 （问题 4217）
• 将具有自然宽高比的对象的默认大小切换为使用 ICB 尺寸，而不是 300px×150px。 （问题 4218）
• 定义了首选宽高比并在适当的情况下使用它来替代“内在宽高比”。
• 其他杂项小的/编辑修复。

自 2018年3月4日的工作草案 以来的主要更改包括：

• 从CSS UI Level 3 中导入 box-sizing 的定义。
• 更严格地指定了 循环百分比 的处理。 （#1132， #2384， #2297， #2674）
• 更改了应用于块轴的 *-content 值 使其不计算为属性的初始值， 而是“表现为”属性的初始值。 （#2708）
• 修复了各种琐碎错误。

自 2017年2月7日的工作草案 以来的主要更改包括：

• 更准确地定义了替换元素的最小内容和最大内容大小。
• 在应用于块轴时，计算新关键字为初始值，而不是潜在不存在的 auto。
• 指定替换元素上的百分比大小将其最小内容贡献归零。
• 修复了针对依赖性包含块解析的百分比大小的混淆/错误定义。 （这可能需要进一步的工作。）
• 将 stretch 和 fit-content 关键字推迟到第4级， 以便进一步考虑它们在 不确定 包含块中的行为。
• 将所有尺寸属性的完整定义拉入（而不是进行差异比较）： 宽度， 高度， 最小宽度， 最小高度，最大宽度， 最大高度，以及 box-sizing。

自CSS Level 2以来的新增内容

除了对各种自动和基于内容的大小算法进行了详细描述之外， 自[CSS2] 以来还新增了以下功能：

• box-sizing 属性（最初在[CSS-UI-3]中定义，后来移至此处）。
• 最小内容， 最大内容，以及 fit-content() 值，属于 尺寸属性。
• auto 初始值用于 最小宽度 和 最小高度 属性（最初在 [CSS-FLEXBOX-1] 中定义，后来移至此处）。

致谢

特别感谢 L. David Baron、Aaron Gustafson、Daniel Holbert 和 Mats Palmgren 对本模块的贡献。

隐私和安全考虑

为了支持自动布局， CSS 将框大小调整为适合其内容。 结合各种 [DOM] 和 [CSSOM] API， 可以将这些框的大小返回给脚本， 这可能会暴露有关这些内容的信息。 然而，这些信息更直接且更容易通过检查 DOM 获取内容， 而不是通过框的大小间接获得。 不能检查其内容的容器（ 例如跨域的 iframe ）也不会向外部页面暴露大小信息， 除非 替换元素（如图像）暴露其自然大小和/或宽高比。