CSS 盒尺寸模块第 3 级

1. 引言

本节为非规范性内容。

CSS 布局中有若干不同的自动尺寸概念，用于各种布局计算。 本节定义了一些更精确的术语， 以帮助将本规范中的布局行为与其他模块中使用的计算联系起来， 并为 width 和 height 属性定义了一些新的关键字， 以允许作者为元素指定这些尺寸计算所得的尺寸。

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

1.1. 模块交互

本模块扩展了 width、height、min-width、min-height、max-width、max-height 和 column-width 特性，这些特性定义于 [CSS2] 第 10 章以及 [CSS3COL] 中。

本模块中对 box-sizing 属性的定义取代了 [CSS-UI-3] 中的定义。

1.2. 值定义

本规范遵循 CSS 属性 定义约定，该约定来自 [CSS2]， 并使用 值定义语法，该语法来自 [CSS-VALUES-3]。 本规范中未定义的值类型定义于 CSS 值和单位 [CSS-VALUES-3] 中。 与其他 CSS 模块组合时，可能会扩展这些值类型的定义。

除了各属性定义中列出的特定属性值之外， 本规范定义的所有属性 还接受 CSS 全局关键字作为其属性值。 为提高可读性，这些关键字没有明确重复列出。

2. 术语

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

尺寸

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

内部尺寸

一个盒的 内容盒尺寸。

外部尺寸

一个盒的 外边距盒尺寸。

确定尺寸

无需执行布局即可确定的尺寸； 即，一个 <length>、 一段文本的度量值（不考虑换行）、 初始包含块的尺寸， 或者一个 <percentage> 或其他公式 （例如非替换块的“拉伸适应”尺寸计算 [CSS2]）， 且该公式仅相对于确定尺寸进行解析。

此外，绝对定位元素的包含块尺寸相对于该元素始终是 确定的。

不确定尺寸

不是确定尺寸的尺寸。 不确定的可用空间本质上是 无限的。

注： 内在尺寸计算关键字，例如 max-content，是不确定的， 即使无需对子元素进行布局即可确定它们， 例如由于尺寸遏制或没有子元素。

可用 空间

表示盒被布局到其中的空间的尺寸， 由 该盒所参与的格式化上下文的规则确定。 盒的可用空间通常 要么是其包含块的度量值（如果它是确定的）， 要么是无限尺寸（当它是不确定的时）。 可用空间也可以是 最小内容 约束或 最大内容 约束， 从而强制布局到其中的盒在该约束下进行布局。

测试

• available-height-for-replaced-content-001.html （实时 测试） （源码）
• table-percentage-max-width-beside-float.html （实时 测试） （源码）
• table-percentage-min-width-below-float.html （实时 测试） （源码）
• table-percentage-min-width-beside-float.html （实时 测试） （源码）

拉伸适应

对给定尺寸进行的拉伸适应 是该尺寸 减去盒在给定维度上的计算外边距（不折叠，并将 auto 视为零）、 边框和内边距 （从而使外部尺寸完全适合）， 并将结果下限限定为零 （从而使内部尺寸不会为负）。

注：这是 CSS2.1§10.3.3 中用于计算正常流中 非替换块的 auto 宽度的公式。

回退尺寸

某些尺寸算法无法很好地处理无限尺寸。 在这些情况下，将改用回退尺寸。 除非另有规定， 它是初始包含块的尺寸。

2.1. 自动盒尺寸

CSS 中有四种自动确定的尺寸 （即根据上下文由 auto 尺寸规则得到的尺寸）：

拉伸适应尺寸

拉伸适应行内 尺寸

拉伸适应块 尺寸

如果一个盒的外部尺寸在给定轴上填满 可用空间， 该盒所占据的尺寸； 换言之，如果可用空间是确定的，则为对该空间进行的拉伸 适应。 如果可用空间是不确定的，则未定义。

注： 对于行内 轴，这在 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 中称为“收缩适应”宽度。

内在尺寸

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

替换元素通常根据其自然尺寸派生其内在尺寸。

以下示例将适应内容尺寸计算 应用于内部 <div> 的宽度， 并将其放置在尺寸不同的包含块中：

• 在最窄的包含块（2ch）中， 盒采用其最小内容尺寸——为了 完整包含其全部内容而溢出包含块， 此时内容已尽可能窄地换行。

• 在中等宽度的包含块（9ch）中， 盒采用其拉伸适应尺寸——恰好填满包含块， 同时其内容换行以适应盒内空间。

• 在最宽的包含块（16ch）中， 盒采用其最大内容尺寸——小于包含块， 但恰好包住其未换行的内容。

<!DOCTYPE html>
<style>div > div { width: fit-content; }</style>
<div style="width: 2ch;">
  <div>abc def ehg</div>
</div>
<div style="width: 9ch;">
  <div>abc def ehg</div>
</div>
<div style="width: 16ch;">
  <div>abc def ehg</div>
</div>

如果在这里用 min-width 或 max-width 属性代替 width， 则会将这些相同的尺寸分别应用为最小宽度或最大宽度， 从而约束首选宽度以确定 使用宽度。 参见 § 3 指定盒尺寸和 § 3.2 尺寸 值：<length-percentage>、auto | none、stretch、min-content、max-content 和 fit-content 值。

2.2. 内在尺寸贡献

最大内容贡献

一个盒为其包含块的最大内容尺寸所贡献的尺寸。

最小内容贡献

一个盒为其包含块的最小内容尺寸所贡献的尺寸。

内在尺寸 贡献

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

内在尺寸贡献基于盒的外部尺寸； 为此，auto 外边距被视为零。

如果理想的最大内容贡献小于最小内容 贡献 （例如由于使用负外边距）， 则实际的最大内容贡献以下限 最小内容贡献为准。

2.3. 内在尺寸约束

最大内容 约束

由盒的包含块施加的尺寸约束， 它使该盒产生其最大内容贡献。

最小内容 约束

由盒的包含块施加的尺寸约束， 它使该盒产生其最小内容贡献。

首选宽高 比

盒固有的宽度:高度比， 它会影响各种尺寸算法， 使其在遵守其他尺寸输入的前提下尽可能生成与该宽高比一致的尺寸。 除非另有规定， 如果盒具有自然宽高比， 则盒的首选宽高比就是该自然宽高比， 并应用于其内容盒。 大多数盒都没有首选宽高比。

测试

• replaced-fractional-height-from-aspect-ratio.html （实时 测试） （源码）

3. 指定盒尺寸

3.1. 尺寸属性

本节定义尺寸属性， 它们指定所应用盒的首选、 最小和最大尺寸。 它们可能的值在下一节中定义： § 3.2 尺寸值：<length-percentage>、auto | none、stretch、min-content、 max-content 和 fit-content 值。

流相对变体（inline-size、block-size 等） 使用元素自身的书写模式进行映射， 并按 [CSS-LOGICAL-1] 中的定义 与其物理对应项（width、height 等） 交互。 另见 CSS 书写模式 3 § 6 抽象盒术语。

在 CSS 中，虽然最小和最大尺寸 都会约束使用尺寸， 但最小尺寸约束始终是最强约束。 此外，内部尺寸始终以下限零为准。

3.1.1. 首选尺寸属性：width、height、inline-size 和 block-size 属性

width 和 height（物理） 以及 inline-size 和 block-size（流相对） 都是尺寸属性，分别指定 盒的首选 宽度 和 高度（物理）， 或 行内尺寸 和 块尺寸（流相对）。

3.1.2. 最小尺寸属性：min-width、min-height、min-inline-size 和 min-block-size 属性

min-width 和 min-height（物理） 以及 min-inline-size 和 min-block-size（流相对） 是尺寸属性，分别指定 盒的最小宽度（“min width”） 和 最小高度（“min height”）， 或 最小行内尺寸（“min inline size”） 和 最小块尺寸（“min block size”）。

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

3.1.3. 最大尺寸属性：max-width、max-height、max-inline-size 和 max-block-size 属性

max-width 和 max-height（物理） 以及 max-inline-size 和 max-block-size（流相对） 是尺寸属性，分别指定 盒的最大宽度（“max width”） 和 最大高度（“max height”）， 或 最大行内尺寸（“max inline size） 和 最大块尺寸（“max block size） 。

3.2. 尺寸值：<length-percentage>、auto | none、stretch、min-content、max-content 和 fit-content 值

以下值用于尺寸属性。 除 auto 和 none 以外的值，都归入 <box-size> 产生式：

<box-size> = <length-percentage> | stretch | min-content | max-content | fit-content

注： 第 2 级中与 <box-size> 等价的内容 仅为 <length-percentage> 本身。

<length-percentage [0,∞]>

使用 <length> 和/或 <percentage> 指定盒的尺寸。 box-sizing 属性指示所度量的是内容盒还是边框盒。

百分比会根据盒的包含块的宽度/高度（视情况而定）进行解析。 如果在某个特定轴上， 包含块的尺寸依赖于盒的尺寸， 则应参见相关布局模块 中有关如何解析百分比的特殊规则。

负值无效。

测试

• thin-element-render.html （实时 测试） （源码）

auto

对于 width/height，指定一个自动 尺寸 （自动块尺寸/自动行内尺寸）。 有关如何计算此值，请参见相关布局模块。

对于 min-width/min-height， 指定一个自动最小尺寸。 不过，除非相关布局模块另有定义， 它会解析为使用值 0。 为了向后兼容， 对于所有 [CSS2] 显示类型 的盒（块盒和行内盒、 行内块 以及所有表格显示类型）， 当 aspect-ratio 为 auto 时， 此关键字的解析值为零。 当没有生成盒时，它也解析为零。

none

不限制盒的尺寸。

stretch

应用拉伸适应 尺寸计算， 尝试使盒的外边距盒尺寸与其 包含块的尺寸相匹配。 参见 § 4.2 拉伸适应尺寸计算：填充包含块。

测试

• block-height-001.html （实时 测试） （源码）
• flex-line-001.html （实时 测试） （源码）
• flex-line-002.html （实时 测试） （源码）
• flex-line-003.html （实时 测试） （源码）
• flex-line-004.html （实时 测试） （源码）
• flex-line-005.html （实时 测试） （源码）
• min-width-1.html （实时 测试） （源码）
• parsing.html （实时 测试） （源码）
• positioned-non-replaced-1.html （实时 测试） （源码）
• positioned-replaced-1.html （实时 测试） （源码）
• positioned-replaced-2.html （实时 测试） （源码）
• positioned-replaced-3.html （实时 测试） （源码）
• stretch-block-size-001.html （实时 测试） （源码）
• stretch-block-size-002.html （实时 测试） （源码）
• stretch-block-size-003.html （实时 测试） （源码）
• stretch-inline-size-001.html （实时 测试） （源码）
• stretch-inline-size-002.html （实时 测试） （源码）
• stretch-inline-size-003.html （实时 测试） （源码）
• stretch-max-block-size-001.html （实时 测试） （源码）
• stretch-max-inline-size-001.html （实时 测试） （源码）
• stretch-min-block-size-001.html （实时 测试） （源码）
• stretch-min-inline-size-001.html （实时 测试） （源码）
• stretch-quirk-001.html （实时 测试） （源码）

min-content

使用相关轴上的最小内容尺寸； 对于盒的块尺寸， 除非另有规定， 这等价于其自动尺寸。

测试

• clone-intrinsic-size.html （实时 测试） （源码）
• clone-nowrap-intrinsic-size-bidi.html （实时 测试） （源码）
• clone-nowrap-intrinsic-size.html （实时 测试） （源码）
• min-content-negative-margin-crash.html （实时 测试） （源码）
• replaced-max-height-min-content.html （实时 测试） （源码）
• replaced-max-size-saturation.html （实时 测试） （源码）
• replaced-max-width-min-content.html （实时 测试） （源码）
• replaced-min-height-min-content.html （实时 测试） （源码）
• replaced-min-width-min-content.html （实时 测试） （源码）
• shrink-to-fit-sizing-max-width-min-content.html （实时 测试） （源码）
• slice-intrinsic-size.html （实时 测试） （源码）
• slice-nowrap-intrinsic-size-bidi.html （实时 测试） （源码）
• slice-nowrap-intrinsic-size.html （实时 测试） （源码）
• svg-no-ar-max-height-min-content.html （实时 测试） （源码）
• svg-no-ar-min-height-min-content.html （实时 测试） （源码）

max-content

使用相关轴上的最大内容尺寸； 对于盒的块尺寸， 除非另有规定， 这等价于其自动尺寸。

fit-content

使用相关轴上的适应内容 尺寸， 即 min(max-content, max(min-content, stretch))。

测试

• fit-content-block-size-abspos.html （实时 测试） （源码）
• fit-content-block-size-fixedpos.html （实时 测试） （源码）
• fit-content-contribution-001.html （实时 测试） （源码）
• fit-content-min-inline-size.html （实时 测试） （源码）
• fit-content-percentage-padding.html （实时 测试） （源码）
• float-clearance-with-margin-collapse-and-fit-content-and-padding-percentage-001.html （实时 测试） （源码）
• float-clearance-with-margin-collapse-and-fit-content-and-padding-percentage-002.html （实时 测试） （源码）
• float-clearance-with-margin-collapse-and-fit-content-and-padding-percentage-003.html （实时 测试） （源码）
• float-clearance-with-margin-collapse-and-fit-content-and-padding-percentage-004.html （实时 测试） （源码）

在所有情况下， 使用值都会以下限限定，以保持内部尺寸非负。

注： stretch、min-content、max-content 和 fit-content 值 是第 3 级新增的。

注： flex-basis 属性因此也获得这些新关键字， 因为其值是通过引用 <'width'> 定义的。

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> 指定的尺寸表示盒的内部尺寸， 不包括外边距/边框/内边距： 它们应用于内容盒。 盒的内边距和边框 在指定的 width 和 height 外部进行布局和绘制。

注： 这是 CSS2.1 对 width 和 height 所规定的行为， 因而也是默认行为。

测试

• box-sizing-content-box-001.xht （实时 测试） （源码）
• box-sizing-content-box-002.xht （实时 测试） （源码）
• box-sizing-content-box-003.xht （实时 测试） （源码）

border-box

尺寸属性中的任何 <length-percentage> 值 都应用于边框盒， 因而表示盒视觉上所呈现的尺寸： 盒的内边距和边框（但不包括 其外边距） 基本上会在使用的 width 和 height 内部进行布局和绘制， 内容盒则调整尺寸以填满剩余空间。 更具体地说， 内容盒的宽度和高度 通过从指定的 <length-percentage> 中 减去相应轴上的边框和内边距来计算， 并将结果以下限零为准 （因为盒的内部尺寸不能为负）。

尺寸属性的使用值， 例如通过 getComputedStyle() 暴露的值， 也指边框盒。

测试

• border-box-and-max-content-001.html （实时 测试） （源码）
• border-box-and-max-content-002.html （实时 测试） （源码）
• border-box-and-max-content-003.html （实时 测试） （源码）
• box-sizing-border-box-001.xht （实时 测试） （源码）
• box-sizing-border-box-002.xht （实时 测试） （源码）
• box-sizing-border-box-003.xht （实时 测试） （源码）
• box-sizing-border-box-004.xht （实时 测试） （源码）
• table-child-percentage-height-with-border-box.html （实时 测试） （源码）

受 box-sizing 影响的值包括 原始 <length-percentage> 值， 以及用于函数表示法中的值，例如 fit-content() [css-sizing-4]。 相比之下， 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. 新的列尺寸值：stretch、min-content、max-content 和 fit-content 值

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

stretch

将最佳列宽指定为多列容器的拉伸适应行内尺寸。

min-content

将最佳列宽指定为多列容器内容的最小内容行内尺寸。

max-content

将最佳列宽指定为多列容器内容的最大内容行内尺寸。

fit-content

将最佳列宽指定为 min(最大内容行内尺寸, max(最小内容行内尺寸, 拉伸适应行内尺寸))。

注： 列宽绝不会因列而异。 当列宽由多列容器的内容决定 （如上述关键字的情况）时， 会考虑其全部内容， 并由所有列共享计算所得的宽度。

4. 外在尺寸确定

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

4.1. 百分比尺寸计算

百分比相对于盒的包含 块指定盒的尺寸。

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

有关当包含块的尺寸依赖于其内容尺寸时 如何解析百分比的详细信息，请参见 § 5.2.1 百分比尺寸盒的内在贡献。

4.2. 拉伸适应尺寸计算：填充包含块

拉伸适应尺寸计算尝试将盒的使用尺寸 设置为所需长度， 以使其主盒的外部尺寸 尽可能接近填满包含块， 同时仍遵守 min-height/min-width/max-height/max-width 所施加的约束。

如果用于百分比尺寸能够解析为确定值的轴

将外边距盒的尺寸设置为恰好填满包含块， 并将 auto 外边距视为零。 （如果这会使内部 尺寸为负， 则改为调整外边距盒的尺寸，使内部尺寸为零。）

对于形成独立格式化上下文的流内块级盒， 使用行盒可用的空间 （即排除浮动）， 代替包含块的行内尺寸。

对于流内块级盒，在解析块 轴尺寸时： 如果百分比所相对解析的祖先元素没有块起始边框或内边距， 且它不是独立格式化上下文， 则在计算此尺寸时将元素的块起始外边距视为零。 对块结束 外边距也以类似方式进行相同处理。

注： 这模拟了外边距 与父元素外边距折叠的效果。 它实际上并不会抑制这些外边距， 因此，如果有任何因素阻止元素实际与其父元素发生折叠， 则拉伸适应 尺寸实际上可能过大， 从而无法完美适应父元素。

否则

在首选尺寸属性中， 表现为 auto。 在最小尺寸 属性中， 表现为 0。 在最大尺寸 属性中， 表现为 none。

<div class="parent">
  <div class="child">text</div>
</div>

.parent { height: 200px; border: solid; }
.child { height: stretch; margin: 10px; }

.outer { height: 200px; margin: 0; }
.inner { height: stretch; margin: 10px; }

<div class="parent">
  <div class="child">text</div>
</div>
some more text

.parent { float: left; margin: 0; }
.child { width: stretch; margin: 10px; }

.parent { height: auto; margin: 0; }
.child { height: stretch; margin: 10px; }

注： 拉伸适应尺寸通常（但不总是） 等价于 stretch 自身对齐。 例如，在多行弹性布局中， 拉伸适应尺寸直接相对于包含块解析， 并将该尺寸贡献给行的交叉尺寸——而 stretch 则贡献适应内容 尺寸——然后最终相对于行的交叉尺寸进行解析。

5. 内在尺寸确定

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

5.1. 内在尺寸

盒在每个轴上的最小内容尺寸 是这样一种情况下它所具有的尺寸： 将其视为一个浮动，并在该轴上给予 auto 首选尺寸 （且该轴上没有最小或最大尺寸）， 并且其包含块在该轴上的尺寸为零。 （换言之，这是按“收缩适应”确定尺寸时所具有的最小尺寸。）

盒在每个轴上的最大内容尺寸 是这样一种情况下它所具有的尺寸： 将其视为一个浮动，并在该轴上给予 auto 首选尺寸 （且该轴上没有最小或最大尺寸）， 并且其包含块在该轴上的尺寸为无限。 （换言之，这是按“收缩适应”确定尺寸时所具有的最大尺寸。）

最小内容尺寸和最大内容尺寸 统称为 内在尺寸。

注： 当盒具有首选宽高比时， 另一维度上的尺寸约束会传递过来， 并可能影响当前所考虑维度上的 auto 尺寸。 参见 CSS2§10。

本规范未定义如何确定浮动的尺寸。 请参见 [CSS2]。 不过，没有自然尺寸的 替换元素的内在尺寸 定义如下：

如果它具有非退化的首选宽高比：

对于最小内容尺寸， 使用零。

对于最大内容尺寸：

• 如果可用空间 在行内轴上是确定的， 则对该尺寸使用拉伸适应来确定行内尺寸， 并使用宽高比计算块尺寸。

• 否则， 如果盒的 min-width 或 min-height 的计算值为 <length>， 则使用该尺寸，并使用宽高比计算另一维度； 如果两个维度都具有 <length> 最小值， 则选择会产生较大整体尺寸的那个。

  注： 此情况此前是 根据 300x150 的默认尺寸计算的， 而不是根据盒的最小尺寸。 现在的行为被认为更好， 并且很可能与 Web 兼容， 但如果出现任何问题，请向 CSSWG 发送反馈。

  测试

  • replaced-fractional-height-from-aspect-ratio-2.html （实时 测试） （源码）

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

如果它没有首选宽高比：

对于最小内容尺寸 和最大内容尺寸：

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

  注： 这种可由作者控制的行为 得益于最小尺寸属性新增的 auto 值。 这被认为是一种更好的行为， 但目前尚不清楚它是否与 Web 兼容， 因此如果出现任何问题，请向 CSSWG 发送反馈。

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

  注： 这并不意味着存在宽高比。

由于一个块级或行内级替换元素， 当其 height 或 width 表现为 auto时， 实际上被定义为使用其最大内容尺寸 （CSS2§10.3.2）， 因此本规范将上述规则 应用于这样一个此前未定义的情况： 替换元素的 height 和 width 都 表现为 auto。

注： 本规范未定义如何 确定 浮动的尺寸。 请参见 [CSS2]、 与该显示类型相关的 CSS 规范， 和/或现有实现 以获取更多详细信息。 未来的规范将详细定义这一点， 并取代 CSS2 中现有的“定义”， 无论它目前多么有限。

尽管 HTML 的 <input type=text> 和 <textarea> 等文本输入控件的 auto 尺寸 通常是固定尺寸， 但此类元素的内容可用于确定基于内容的内在尺寸， 就像非替换块容器一样。 因此，min-content 和 max-content 这两个 尺寸属性关键字 对于在其盒内将值渲染为文本的表单控件， 表示基于内容的尺寸， 从而允许此类控件像普通非替换元素一样 根据其可见内容调整尺寸。

在这种情况下，内容被定义为输入控件的值 （对于 textarea， 是原始值； 对于 input， 是值）， 可能会将其转换为更易读和/或本地化的显示格式， 然后将其视为输入控件的子文本 序列， 并且只在输入控件实际允许换行的位置 允许软换行机会 （无论这是由 CSS 属性还是其他 UA 内部约束决定）。 如果输入控件指定了要覆盖显示在其值显示区域中的占位符文本， 则在计算基于内容的尺寸时也会测量该文本——无论占位符文本当前是否可见。 （因此，输入控件基于内容的内在尺寸 是适应占位符文本所需尺寸与适应值所需尺寸中的较大者。）

UA 可以对表单控件的 最小内容和最大内容尺寸 强制设置最小值 （例如容纳一个零宽字符所需的尺寸， 或触摸目标的最小可用尺寸）， 以确保为插入符留出足够空间， 并以其他方式维持表单控件的可用性。

注： 这可能会扩展到 iframe 或其他包含内容的替换元素 （参见讨论）， 但文本输入是一个重要用例； 而且由于其位于文档内部， 它带来的额外复杂性最少。

5.2. 内在贡献

盒在每个轴上的最小内容贡献/最大内容贡献 是一个假想的 auto 尺寸浮动的内容盒尺寸， 该浮动仅包含该盒， 且该假想浮动的包含块尺寸分别为零/无限。

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

为此，stretch 自身对齐和拉伸适应尺寸计算 （当它们能够在外在上解析时） 会像可解析百分比一样被视为确定的。

5.2.1. 百分比尺寸盒的内在贡献

有时，百分比尺寸盒的包含 块尺寸 依赖于该盒自身的内在尺寸贡献， 从而形成循环依赖。 在计算这种盒的内在尺寸贡献时 （包括任何基于内容的自动最小尺寸计算）， 相对于与内在尺寸贡献相同轴上的尺寸 进行解析的百分比值 （即循环百分比尺寸） 会采用特殊方式进行解析：

1. 如果盒是非替换的， 则任何最大尺寸属性或首选尺寸属性 （width/max-width/height/max-height） 如果指定为一个包含百分比的表达式 （例如 10% 或 calc(10px + 0%)）， 且该百分比是循环的， 则整个值 仅在计算盒的内在尺寸贡献时 被视为该属性的初始值。 例如，对于指定了 width: calc(20px + 50%) 的盒， 其最大内容贡献会按其 width 为 auto 的方式计算。 （不过，在盒本身的实际尺寸计算过程中， 仍会照常考虑该百分比；见下文。）
2. 同样，如果盒是替换的， 则任何最大尺寸属性或首选尺寸属性 如果指定为一个包含百分比的表达式， 且该百分比是循环的， 则整个值 仅在计算盒的最大内容贡献时 被视为该属性的初始值。
3. 如果盒是替换的， 则任何最大尺寸属性或首选尺寸属性 （width/max-width/height/max-height） 的值中的循环百分比， 在计算相应轴上的最小内容贡献时， 相对于零进行解析。 （有关这适用于 HTML 中哪些元素的列表，请参见 § 5.2.2 可压缩的替换元素。） 如果盒还具有首选宽高比， 则此最小内容贡献以下限 从另一轴通过首选宽高比传递而来的任何 <length-percentage> 最小尺寸为准——其中任何此类百分比都相对于零解析。

   我们是否应该在 传递百分比之前，先让它们相对于其包含块而不是零进行解析？参见 讨论。

   UA 还可以基于 UI 考虑进一步限制最小内容贡献的下限， 例如确保某些 UI 元素保持可见 （例如 select 上的下拉箭头）。

   注： 与往常一样，最小内容 贡献 也会以其自身轴上的最小尺寸作为下限。

   此规则也适用于计算 基于内容的自动最小尺寸 或其相应的尺寸贡献， 从而得到一个确定的“指定尺寸建议”。

   测试

   • intrinsic-percent-replaced-028.html （实时 测试） （源码）
   例如， 一个 input 被指定为 width: calc(50% + 50px) 时， 其最小内容贡献为 50px， 再加上任何水平外边距/边框/内边距。
4. 对于最小尺寸 属性， 以及外边距和内边距 （以及沟槽）， 在确定内在尺寸贡献时， 循环百分比相对于零进行解析。

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

• 如果循环依赖是由于 包含块上块轴上的某个尺寸（但不是最小尺寸）引入的 （即在大多数布局模式中，是 block-size 或 max-block-size， 或在弹性 布局中是 flex-basis）， 并使其依赖于其内容的尺寸， 则盒的百分比不会被解析，而是表现为 auto。

  注： 网格项在两个 轴上、 弹性项在主轴上， 以及弹性项的子元素在两个轴上， 在这种情况下仍允许百分比进行解析。

• 否则，百分比相对于包含块的尺寸进行解析。 （包含块的尺寸不会根据盒最终所得的尺寸重新解析； 因此内容可能会溢出或不足以填满包含块。）

注： 这些规则规定了此前未定义的循环情况行为， 对应于 CSS2§10.2、 CSS2§8.3 和 CSS2§8.4。 另请注意，对于 CSS2 中未描述的布局模式 （例如弹性布局）， CSS2§10.5 中的行为已由各自的规范取代。

<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 元素在用于上述百分比尺寸替换元素 规则时， 也被视为替换 元素， 当其 width/height 或 max-width/max-height 使用循环百分比尺寸表示时， 可以压缩其最小内容贡献：

• input 的任何 type ，只要它不是“类似按钮”的； 这可能因 UA 而异。

  如果某个类型在特定 UA 中的显示方式类似于 button 元素， 即其中可以包含实际决定元素布局的内容， 则该类型在该 UA 中就是“类似按钮”的。 在大多数 UA 中，"button"、"reset"、"submit" 和 "color" 类型类似按钮； 在某些 UA 中，"file" 类型也部分类似按钮， 因为它显示为文本输入（可收缩） 和按钮（类似按钮，因此不可收缩）的组合。

• select、 textarea、 progress、 meter、 marquee。

在 问题 6348 中跟踪将此行为应用于 max-width/height 的 Web 兼容性和实现进展。[问题 #6348]

变更

最近的变更

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

• 将 fit-content() 移至第 4 级，并将 fit-content 和 stretch 从第 4 级移至本级。 （问题 10601）
• 从 [CSS-LOGICAL-1] 导入流相对尺寸属性的定义。 （问题 10189）
• 澄清拉伸适应尺寸计算的细节。 （问题 11044、 问题 11006、 问题 11076、 问题 4028、 问题 13260、 问题 11489）
• 引入 <box-size> 语法产生式，以整合尺寸值。 （问题 13478）
• 澄清：用于查找具有首选宽高比的替换元素 内在尺寸的规则，仅在宽高比非退化时适用。 （问题 12612）
• 规定 aspect-ratio [css-sizing-4] 会保留 解析值为 auto 的最小尺寸，其解析值仍为 auto。 （问题 11716）
• 澄清最大内容 尺寸和最大内容贡献分别以下限最小内容尺寸/最小内容贡献为准。 （问题 12076）
• 澄清在内在尺寸贡献计算中对循环百分比的处理。 （问题 6822）
• 澄清在内在尺寸计算中，stretch 尺寸的处理方式与百分比类似。 （问题 10619）
• 澄清内在尺寸关键字的不确定性。 （问题 7206）
• 向尺寸属性添加逻辑属性组。 （问题 2822）
• 增加 Web Platform Tests 覆盖。
• 其他各种较小的编辑修复和改进。

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

• 修复 contain-intrinsic-size 值的顺序， 当 auto 与其他值组合时， 使解析不会产生歧义。 （问题 6391）
• 澄清哪些元素允许在 contain-intrinsic-size: auto 下没有上次记忆的尺寸。 （问题 6220）
• 将 contain-intrinsic-size: auto 限制为仅在 content-visibility 为 auto 时生效。 （问题 6308）

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

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

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

• 规定 min-content 和 max-content 在另有规定（由相关布局模块规定）时， 不一定表现得与属性的初始值相同。 （问题 3973）
• 更改 fit-content() 的内在贡献， 使其在计算内在贡献时 按参数单独出现时应采用的方式处理该参数， 并据此解析 fit-content 公式， 而不再在计算内在贡献时 对 fit-content() 解析采用特殊行为。 （问题 3731）
• 更改没有内在尺寸的替换盒的最大内容尺寸， 仅当其最小尺寸为 <length> 时， 才使用该最小尺寸代替 ICB 或 300px×150px， 参见 § 5.1 内在尺寸。 （问题 4217）
• 将具有自然宽高比的对象的默认尺寸计算改为使用 ICB 尺寸， 而不是 300px×150px。 （问题 4218）
• 定义首选宽高比， 并在适当位置用它替代“内在宽高比”。
• 其他各种较小/编辑性修复。

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

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

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

• 更准确地定义替换元素的 min-content 和 max-content 尺寸。
• 当新关键字应用于块轴时，将其计算为初始值，而不是计算为可能并不存在的 auto。
• 规定替换元素上的百分比尺寸会将其最小内容贡献归零。
• 修复相对于依赖性包含块解析百分比尺寸时令人困惑/错误的定义。 （这可能仍需进一步处理。）
• 将 stretch 和 fit-content 关键字推迟到 第 4 级， 以便进一步考虑它们在不确定包含块中的行为。
• 完整引入所有尺寸属性的定义（而不是仅描述差异）： width、height、min-width、 min-height、max-width'、max-height 和 box-sizing。

自 CSS 第 2 级以来的新增内容

除了为各种自动和基于内容的尺寸算法 增加大量详细说明之外， 自 [CSS2] 以来还新增了以下特性：

• box-sizing 属性（最初定义于 [CSS-UI-3]，随后移至此处）。
• stretch、min-content、max-content 和 fit-content 这些 尺寸 属性值。
• min-width 和 min-height 属性的 auto 初始值 （最初定义于 [CSS-FLEXBOX-1]，随后移至此处）。

致谢

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

隐私注意事项

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

安全注意事项

尚未报告本规范存在新的安全注意事项。