Web 技术规范翻译

本文档旨在翻译和整理 Web 相关的技术规范。翻译保持先英文、后中文。其中术语不翻译，主要用于更为沉浸式的阅读原文档。有翻译内容不完整，可以在原文中查看

css-display glossary

principal box

When an element generates one or more boxes, one of them is the principal box, which contains its descendant boxes and generated content, and is also the box involved in any positioning scheme.

当一个元素生成一个或多个 boxes 时，其中一个是 principal box，它包含其后代 boxes 和生成的内容，也是参与定位方案的 box。

Some elements may generate additional boxes in addition to the principal box (such as list-item elements, which generate an additional marker box, or table elements, which generate a principal table wrapper box and an additional table grid box). These additional boxes are placed with respect to the principal box.

某些元素除了 principal box 外还可能生成额外的 boxes（例如 list-item 元素会生成额外的 marker box，table 元素会生成 principal table wrapper box 和额外的 table grid box）。这些额外的 boxes 相对于 principal box 进行定位。

inline-level

Content that participates in inline layout. Specifically, inline-level boxes and text sequences.

参与 inline layout 的内容。具体来说，是 inline-level boxes 和文本序列。

block-level

Content that participates in block layout. Specifically, block-level boxes.

参与 block layout 的内容。具体来说，是 block-level boxes。

inline box

A non-replaced inline-level box whose inner display type is flow. The contents of an inline box participate in the same inline formatting context as the inline box itself.

inner display type 为 flow 的 non-replaced inline-level box。inline box 的内容与 inline box 本身参与相同的 inline formatting context。

inner display: display 属性有两个值，比如 block flow，第一个值是 outer display type，第二个值是 inner display type

non-replaced: CSS 中，replaced element（替换元素）如 <img>、<input>、<video> 等，其内容不受 CSS 影响。non-replaced element（非替换元素）如 <span>、<div> 等，其内容完全由 CSS 控制。

atomic inline

An inline-level box that is replaced (such as an image) or that establishes a new formatting context (such as an inline-block or inline-table) and cannot split across lines (as inline boxes and ruby containers can).

被替换的 inline-level box（如图片）或建立新 formatting context 的 inline-level box（如 inline-block 或 inline-table），且不能跨行分割（而 inline boxes 和 ruby containers 可以跨行分割）。

Any inline-level box whose inner display type is not flow establishes a new formatting context of the specified inner display type.

任何 inner display type 不是 flow 的 inline-level box 都会建立相应 inner display type 的新 formatting context。

block container

A block container either contains only inline-level boxes participating in an inline formatting context, or contains only block-level boxes participating in a block formatting context (possibly generating anonymous block boxes to ensure this constraint, as defined in CSS2§9.2.1.1).

block container 要么只包含参与 inline formatting context 的 inline-level boxes，要么只包含参与 block formatting context 的 block-level boxes（可能生成 anonymous block boxes 来确保这个约束）。

A block container that contains only inline-level content establishes a new inline formatting context. The element then also generates a root inline box which wraps all of its inline content. Note, this root inline box concept effectively replaces the "anonymous inline element" concept introduced in CSS2§9.2.2.1.

只包含 inline-level 内容的 block container 会建立新的 inline formatting context。该元素还会生成一个 root inline box，包裹其所有 inline 内容。注意，这个 root inline box 概念有效地替代了 CSS2§9.2.2.1 中引入的 "anonymous inline element" 概念。

A block container establishes a new block formatting context if its parent formatting context is not a block formatting context; otherwise, when participating in a block formatting context itself, it either establishes a new block formatting context for its contents or continues the one in which it participates, as determined by the constraints of other properties (such as overflow or align-content).

如果 block container 的父级 formatting context 不是 block formatting context，则它会建立新的 block formatting context；否则，当它本身参与 block formatting context 时，它会为其内容建立新的 block formatting context 或继续参与现有的 block formatting context，这由其他属性（如 overflow 或 align-content）的约束决定。

A block container box can both establish a block formatting context and an inline formatting context simultaneously.

block container box 可以同时建立 block formatting context 和 inline formatting context。

replaced element

An element whose content is outside the scope of the CSS formatting model, such as an image or embedded document. For example, the content of the HTML img element is often replaced by the image that its src attribute designates.

内容在 CSS formatting model 范围之外的元素，如图片或嵌入文档。例如，HTML img 元素的内容通常被其 src 属性指定的图片替换。

Replaced elements often have natural dimensions. For example, a bitmap image has a natural width and a natural height specified in absolute units (from which the natural ratio can obviously be determined). On the other hand, other objects may not have any natural dimensions (for example, a blank HTML document). See [css-images-3].

替换元素通常具有自然尺寸。例如，位图图片具有以绝对单位指定的自然宽度和自然高度（从中可以明显确定自然比例）。另一方面，其他对象可能没有任何自然尺寸（例如，空白 HTML 文档）。参见 [css-images-3]。

User agents may consider a replaced element to not have any natural dimensions if it is believed that those dimensions could leak sensitive information to a third party. For example, if an HTML document changed natural size depending on the user's bank balance, then the UA might want to act as if that resource had no natural dimensions.

如果用户代理认为这些尺寸可能向第三方泄露敏感信息，则可能认为替换元素没有任何自然尺寸。例如，如果 HTML 文档根据用户银行余额改变自然尺寸，则 UA 可能希望表现得好像该资源没有自然尺寸。

The content of replaced elements is not considered in the CSS formatting model; however, their natural dimensions are used in various layout calculations. Replaced elements always establish an independent formatting context.

替换元素的内容在 CSS formatting model 中不被考虑；但是，它们的自然尺寸用于各种布局计算。替换元素总是建立 independent formatting context。

A non-replaced element is one that is not replaced, i.e. whose rendering is dictated by the CSS model.

非替换元素是指不被替换的元素，即其渲染由 CSS model 决定。

containing block

A rectangle that forms the basis of sizing and positioning for the boxes associated with it. Notably, a containing block is not a box (it is a rectangle), however it is often derived from the dimensions of a box. Each box is given a position with respect to its containing block, but it is not confined by this containing block; it can overflow. The phrase "a box's containing block" means "the containing block in which the box lives," not the one it generates.

为关联的 boxes 提供尺寸和定位基础的矩形。值得注意的是，containing block 不是一个 box（它是一个矩形），但它通常由 box 的尺寸派生而来。每个 box 都相对于其 containing block 获得位置，但它不受这个 containing block 的限制；它可以溢出。"a box's containing block" 这个短语的意思是 "box 所在的 containing block"，而不是它生成的那个。

In general, the edges of a box act as the containing block for descendant boxes; we say that a box "establishes" the containing block for its descendants. If properties of a containing block are referenced, they reference the values on the box that generated the containing block. (For the initial containing block, values are taken from the root element unless otherwise specified.)

通常，box 的边缘作为后代 boxes 的 containing block；我们说一个 box "建立"了其后代的 containing block。如果引用了 containing block 的属性，它们引用生成 containing block 的 box 上的值。（对于 initial containing block，除非另有说明，否则值取自 root element。）

See CSS2 Section 9.1.2 and Section 10.1 and CSS Positioned Layout 3 § 2.1 Containing Blocks of Positioned Boxes for details.

详情参见 CSS2 第 9.1.2 节和第 10.1 节以及 CSS Positioned Layout 3 § 2.1 定位 Boxes 的 Containing Blocks。

containing block chain

A sequence of successive containing blocks that form an ancestor-descendant chain through the containing block relation. For example, an inline box's containing block is the content box of its closest block container ancestor; if that block container is an in-flow block, then its containing block is formed by its parent block container; if that grandparent block container is absolutely positioned, then its containing block is the padding edges of its closest positioned ancestor (not necessarily its parent), and so on up to the initial containing block.

通过 containing block 关系形成祖先-后代链的连续 containing blocks 序列。例如，inline box 的 containing block 是其最近 block container 祖先的 content box；如果该 block container 是 in-flow block，则其 containing block 由其父级 block container 形成；如果该祖父级 block container 是绝对定位的，则其 containing block 是其最近定位祖先（不一定是其父级）的 padding edges，依此类推直到 initial containing block。

initial containing block

The containing block of the root element. The initial containing block establishes a block formatting context, and takes the principal writing mode of the document (see CSS Writing Modes 4 § 8.1 Propagation to the Initial Containing Block). In continuous media, it has the dimensions of the small viewport size and is anchored at the canvas origin. In paged media, see [CSS-PAGE-3] for its position and dimensions.

root element 的 containing block。initial containing block 建立 block formatting context，并采用文档的主要书写模式（参见 CSS Writing Modes 4 § 8.1 向初始包含块的传播）。在连续媒体中，它具有小视口尺寸的尺寸，并锚定在画布原点。在分页媒体中，参见 [CSS-PAGE-3] 了解其位置和尺寸。

formatting context

A formatting context is the environment into which a set of related boxes are laid out. Different formatting contexts lay out their boxes according to different rules. For example, a flex formatting context lays out boxes according to the flex layout rules [CSS-FLEXBOX-1], whereas a block formatting context lays out boxes according to the block-and-inline layout rules [CSS2]. Additionally, some types of formatting contexts interleave and co-exist: for example, an inline formatting context exists within and interacts with the block formatting context of the element that establishes it, and a ruby container overlays a ruby formatting context over the inline formatting context in which its ruby base container participates.

formatting context 是相关 boxes 进行布局的环境。不同的 formatting contexts 根据不同的规则布局其 boxes。例如，flex formatting context 根据 flex 布局规则 [CSS-FLEXBOX-1] 布局 boxes，而 block formatting context 根据块级和行内布局规则 [CSS2] 布局 boxes。此外，某些类型的 formatting contexts 会交错并存：例如，inline formatting context 存在于建立它的元素的 block formatting context 内部并与之交互，ruby container 在其 ruby base container 参与的 inline formatting context 上叠加 ruby formatting context。

A box either establishes a new independent formatting context or continues the formatting context of its containing block. In some cases, it might additionally establish a new (non-independent) co-existing formatting context. Unless otherwise specified, however, establishing a new formatting context creates an independent formatting context. The type of formatting context established by the box is determined by its inner display type. E.g. a grid container establishes a new grid formatting context, a ruby container establishes a new ruby formatting context, and a block container can establish a new block formatting context and/or a new inline formatting context. See the display property.

box 要么建立新的独立 formatting context，要么继续其 containing block 的 formatting context。在某些情况下，它可能还会建立新的（非独立的）共存的 formatting context。但是，除非另有说明，建立新的 formatting context 会创建独立的 formatting context。box 建立的 formatting context 类型由其 inner display type 决定。例如，grid container 建立新的 grid formatting context，ruby container 建立新的 ruby formatting context，block container 可以建立新的 block formatting context 和/或新的 inline formatting context。参见 display 属性。

independent formatting context

When a box establishes an independent formatting context (whether that formatting context is of the same type as its parent or not), it essentially creates a new, independent layout environment: except through the sizing of the box itself, the layout of its descendants is (generally) not affected by the rules and contents of the formatting context outside the box, and vice versa.

当 box 建立 independent formatting context（无论该 formatting context 是否与其父级类型相同）时，它本质上创建了一个新的、独立的布局环境：除了通过 box 本身的尺寸外，其后代的布局（通常）不受 box 外部 formatting context 的规则和内容影响，反之亦然。

For example, in a block formatting context, floated boxes affect the layout of surrounding boxes. But their effects do not escape their formatting context: the box establishing their formatting context grows to fully contain them, and floats from outside that box are not allowed to protrude into and affect the contents inside the box.

例如，在 block formatting context 中，floated boxes 会影响周围 boxes 的布局。但它们的影响不会逃逸出其 formatting context：建立其 formatting context 的 box 会增长以完全包含它们，而来自该 box 外部的浮动元素不允许侵入并影响 box 内部的内容。

As another example, margins do not collapse across formatting context boundaries.

作为另一个例子，margins 不会跨越 formatting context 边界进行折叠。

Certain properties can force a box to establish an independent formatting context in cases where it wouldn't ordinarily. For example, making a box out-of-flow causes it to blockify as well as to establish an independent formatting context. As another example, certain values of the contain property can cause a box to establish an independent formatting context. Turning a block into a scroll container will cause it to establish an independent formatting context; however turning a subgrid into a scroll container will not—​it continues to act as a subgrid, with its contents participating in the layout of its parent grid container.

某些属性可以强制 box 在通常不会的情况下建立 independent formatting context。例如，使 box 脱离流会导致其 blockify 并建立 independent formatting context。作为另一个例子，contain 属性的某些值可以导致 box 建立 independent formatting context。将 block 转换为 scroll container 会导致其建立 independent formatting context；但是将 subgrid 转换为 scroll container 不会——它继续作为 subgrid 工作，其内容参与其父级 grid container 的布局。

A block box that establishes an independent formatting context establishes a new block formatting context for its contents. In most other cases, forcing a box to establish an independent formatting context is a no-op—​either the box already establishes an independent formatting context (e.g. flex containers), or it's not possible to establish a totally independent new formatting context on that type of box (e.g. non-replaced inline boxes).

建立 independent formatting context 的 block box 为其内容建立新的 block formatting context。在大多数其他情况下，强制 box 建立 independent formatting context 是无操作的——要么 box 已经建立了 independent formatting context（例如 flex containers），要么不可能在该类型的 box 上建立完全独立的新 formatting context（例如 non-replaced inline boxes）。

block formatting context/inline formatting context

Block and inline formatting contexts are defined in CSS 2.1 Section 9.4. Inline formatting contexts exist within (are part of their containing) block formatting contexts; for example, line boxes belonging to the inline formatting context interact with floats belonging to the block formatting context.

block formatting context 和 inline formatting context 在 CSS 2.1 第 9.4 节中定义。inline formatting context 存在于（是其包含的）block formatting context 内部；例如，属于 inline formatting context 的 line boxes 与属于 block formatting context 的 floats 交互。

block layout

The layout of block-level boxes, performed within a block formatting context.

block-level boxes 的布局，在 block formatting context 内执行。

block formatting context root

A block container that establishes a new block formatting context.

建立新 block formatting context 的 block container。

（非常宽松地）建立新 formatting context（除了 inline formatting context）的任何 block-level box

out-of-flow/in-flow

A box is out-of-flow if it is extracted from its expected position and interaction with surrounding content and laid out using a different paradigm outside the normal flow of content in its parent formatting context. This occurs if the box is floated (via float) or absolutely positioned (via position). A box is in-flow if it is not out-of-flow.

如果 box 从其预期位置和与周围内容的交互中提取出来，并在其父级 formatting context 的正常内容流之外使用不同的范式进行布局，则该 box 是 out-of-flow。如果 box 被浮动（通过 float）或绝对定位（通过 position），则会发生这种情况。如果 box 不是 out-of-flow，则它是 in-flow。

CSS22: 9 Visual formatting model

9.1 Introduction to the visual formatting model

This chapter and the next describe the visual formatting model: how user agents process the document tree for visual media.

本章和下一章描述 visual formatting model：user agents 如何处理 visual media 的 document tree。

In the visual formatting model, each element in the document tree generates zero or more boxes according to the box model. The layout of these boxes is governed by:

在 visual formatting model 中，document tree 中的每个元素根据 box model 生成零个或多个 boxes。这些 boxes 的布局由以下因素控制：

box dimensions and type.

box 的尺寸和类型。

positioning scheme (normal flow, float, and absolute positioning).

positioning scheme（normal flow、float 和 absolute positioning）。

relationships between elements in the document tree.

document tree 中元素之间的关系。

external information (e.g., viewport size, intrinsic dimensions of images, etc.).

其他 information（例如，viewport size、图片的 intrinsic dimensions 等）。

The properties defined in this chapter and the next apply to both continuous media and paged media. However, the meanings of the margin properties vary when applied to paged media (see the page model for details).

本章和下一章定义的属性适用于 continuous media 和 paged media。但是，margin properties 在应用于 paged media 时其含义会有所不同（详情参见 page model）。

The visual formatting model does not specify all aspects of formatting (e.g., it does not specify a letter-spacing algorithm). Conforming user agents may behave differently for those formatting issues not covered by this specification.

visual formatting model 并不指定格式化的所有方面（例如，它不指定 letter-spacing 算法）。符合规范的 user agents 对于本规范未涵盖的格式化问题可能表现不同。

media 指的是媒体类型，用于区分不同的输出环境或设备类型。 continuous media（连续媒体）：指连续滚动的显示环境，内容可以无限滚动，没有固定的页面边界。例如：网页浏览器、手机屏幕、电视屏幕等 paged media（分页媒体）：指有固定页面边界的显示环境，内容被分割成固定大小的页面。例如：打印页面、PDF 文档、电子书等

9.1.1 The viewport

User agents for continuous media generally offer users a viewport (a window or other viewing area on the screen) through which users consult a document. User agents may change the document's layout when the viewport is resized (see the initial containing block).

continuous media 的 user agents 通常为用户提供 viewport（屏幕上的窗口或其他查看区域），用户通过它查看文档。当 viewport 调整大小时，user agents 可能会改变文档的布局（参见 initial containing block）。

When the viewport is smaller than the area of the canvas on which the document is rendered, the user agent should offer a scrolling mechanism. There is at most one viewport per canvas, but user agents may render to more than one canvas (i.e., provide different views of the same document).

当 viewport 小于渲染文档的 canvas 区域时，user agent 应该提供滚动机制。每个 canvas 最多有一个 viewport，但 user agents 可能渲染到多个 canvas（即提供同一文档的不同视图）。

9.1.2 Containing blocks

In CSS 2.2, many box positions and sizes are calculated with respect to the edges of a rectangular box called a containing block. In general, generated boxes act as containing blocks for descendant boxes; we say that a box "establishes" the containing block for its descendants. The phrase "a box's containing block" means "the containing block in which the box lives," not the one it generates.

在 CSS 2.2 中，许多 box 的位置和尺寸都是相对于称为 containing block 的矩形 box 的边缘计算的。通常，生成的 boxes 作为后代 boxes 的 containing blocks；我们说一个 box "建立"了其后代的 containing block。"a box's containing block" 这个短语的意思是 "box 所在的 containing block"，而不是它生成的那个。

Each box is given a position with respect to its containing block, but it is not confined by this containing block; it may overflow.

每个 box 都相对于其 containing block 获得位置，但它不受这个 containing block 的限制；它可能溢出。

The details of how a containing block's dimensions are calculated are described in the next chapter.

containing block 的尺寸如何计算的详细信息在下一章中描述。

9.2 Controlling box generation

The following sections describe the types of boxes that may be generated in CSS 2.2. A box's type affects, in part, its behavior in the visual formatting model. The 'display' property, described below, specifies a box's type.

以下各节描述了 CSS 2.2 中可能生成的 boxes 类型。box 的类型部分影响其在 visual formatting model 中的行为。下面描述的 'display' 属性指定了 box 的类型。

Certain values of the 'display' property cause an element of the source document to generate a principal box that contains descendant boxes and generated content and is also the box involved in any positioning scheme. Some elements may generate additional boxes in addition to the principal box: 'list-item' elements. These additional boxes are placed with respect to the principal box.

'display' 属性的某些值会导致源文档的元素生成 principal box，该 box 包含后代 boxes 和生成的内容，也是参与任何定位方案的 box。某些元素除了 principal box 外还可能生成额外的 boxes：'list-item' 元素。这些额外的 boxes 相对于 principal box 进行定位。

9.2.1 Block-level elements and block boxes

Block-level elements – those elements of the source document that are formatted visually as blocks (e.g., paragraphs) – are elements which generate a block-level principal box. Values of the 'display' property that make an element block-level include: 'block', 'list-item', and 'table'. Block-level boxes are boxes that participate in a block formatting context.

Block-level elements（源文档中 formatted visually 为 blocks 的元素，如段落）是生成 block-level principal box 的元素。使元素成为 block-level 的 'display' 属性值包括：'block'、'list-item' 和 'table'。Block-level boxes 是参与 block formatting context 的 boxes。

In CSS 2.2, a block-level box is also a block container box unless it is a table box or the principal box of a replaced element. A block container box either contains only block-level boxes or establishes an inline formatting context and thus contains only inline-level boxes. An element whose principal box is a block container box is a block container element. Values of the 'display' property which make a non-replaced element generate a block container include 'block', 'list-item' and 'inline-block'. Not all block container boxes are block-level boxes: non-replaced inline blocks and non-replaced table cells are block containers but are not block-level. Block-level boxes that are also block containers are called block boxes.

在 CSS 2.2 中，block-level box 也是 block container box，除非它是 table box 或 replaced element 的 principal box。block container box 要么只包含 block-level boxes，要么建立 inline formatting context 从而只包含 inline-level boxes。principal box 是 block container box 的元素是 block container element。使 non-replaced element 生成 block container 的 'display' 属性值包括 'block'、'list-item' 和 'inline-block'。并非所有 block container boxes 都是 block-level boxes：non-replaced inline blocks 和 non-replaced table cells 是 block containers 但不是 block-level。同时也是 block containers 的 block-level boxes 称为 block boxes。

The three terms "block-level box," "block container box," and "block box" are sometimes abbreviated as "block" where unambiguous.

三个术语 "block-level box"、"block container box" 和 "block box" 在无歧义时有时缩写为 "block"。

9.2.1.1 Anonymous block boxes

In a document like this:

在如下文档中：

<DIV>
  Some text
  <P>More text
</DIV>

(and assuming the DIV and the P both have 'display: block'), the DIV appears to have both inline content and block content. To make it easier to define the formatting, we assume that there is an anonymous block box around "Some text".

（假设 DIV 和 P 都有 'display: block'），则 DIV 同时具有 inline content 和 block content。为了使 formatting 更容易定义，我们假设 "Some text" 周围有一个 anonymous block box。

In other words: if a block container box (such as that generated for the DIV above) has a block-level box inside it (such as the P above), then we force it to have only block-level boxes inside it.

换句话说：如果 block container box（如 DIV 生成的那个）内部有 block-level box（如上面的 P），那么我们就强制它内部只有 block-level boxes。

9.2.2 Inline-level elements and inline boxes

Inline-level elements are those elements of the source document that do not form new blocks of content; the content is distributed in lines (e.g., emphasized pieces of text within a paragraph, inline images, etc.). The following values of the 'display' property make an element inline-level: 'inline', 'inline-table', and 'inline-block'. Inline-level elements generate inline-level boxes, which are boxes that participate in an inline formatting context.

Inline-level elements 是源文档中不形成新内容块的元素；内容分布在行中（例如，段落中强调的文本片段、inline images 等）。以下 'display' 属性值使元素成为 inline-level：'inline'、'inline-table' 和 'inline-block'。Inline-level elements 生成 inline-level boxes，这些 boxes 参与 inline formatting context。

An inline box is one that is both inline-level and whose contents participate in its containing inline formatting context. A non-replaced element with a 'display' value of 'inline' generates an inline box. Inline-level boxes that are not inline boxes (such as replaced inline-level elements, inline-block elements, and inline-table elements) are called atomic inline-level boxes because they participate in their inline formatting context as a single opaque box.

inline box 既是 inline-level，其内容又参与其包含的 inline formatting context。具有 'display' 值为 'inline' 的 non-replaced element 生成 inline box。不是 inline boxes 的 inline-level boxes（如 replaced inline-level elements、inline-block elements 和 inline-table elements）称为 atomic inline-level boxes，因为它们作为单个不透明 box 参与其 inline formatting context。

9.2.2.1 Anonymous inline boxes

Any text that is directly contained inside a block container element (not inside an inline element) must be treated as an anonymous inline element.

直接包含在 block container element 内部（不在 inline element 内部）的任何文本必须被视为 anonymous inline element。

In a document with HTML markup like this:

在具有如下 HTML 标记的文档中：

<p>Some <em>emphasized</em> text</p>

the <p> generates a block box, with several inline boxes inside it. The box for "emphasized" is an inline box generated by an inline element (<em>), but the other boxes ("Some" and "text") are inline boxes generated by a block-level element (<p>). The latter are called anonymous inline boxes, because they do not have an associated inline-level element.

<p> 生成一个 block box，其内部有几个 inline boxes。"emphasized" 的 box 是由 inline element（<em>）生成的 inline box，但其他 boxes（"Some" 和 "text"）是由 block-level element（<p>）生成的 inline boxes。后者称为 anonymous inline boxes，因为它们没有关联的 inline-level element。

Such anonymous inline boxes inherit inheritable properties from their block parent box. Non-inherited properties have their initial value. In the example, the color of the anonymous inline boxes is inherited from the P, but the background is transparent.

此类 anonymous inline boxes 从其 block parent box 继承可继承的属性。非继承属性具有其初始值。在示例中，anonymous inline boxes 的 color 继承自 P，但 background 是透明的。

White space content that would subsequently be collapsed away according to the 'white-space' property does not generate any anonymous inline boxes.

根据 'white-space' 属性随后会被折叠掉的空白内容不会生成任何 anonymous inline boxes。

If it is clear from the context which type of anonymous box is meant, both anonymous inline boxes and anonymous block boxes are simply called anonymous boxes in this specification.

如果从上下文中清楚指的是哪种类型的 anonymous box，则在本规范中 anonymous inline boxes 和 anonymous block boxes 都简单地称为 anonymous boxes。

There are more types of anonymous boxes that arise when formatting tables.

在格式化 tables 时还会出现更多类型的 anonymous boxes。

9.2.3 Run-in boxes

定义在 CSS3 中

9.2.4 The 'display' property

The values of this property have the following meanings:

此属性的值具有以下含义：

block

This value causes an element to generate a principal block box.

此值使元素生成 principal block box。

inline-block

This value causes an element to generate a principal inline-level block container. (The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.)

此值使元素生成 principal inline-level block container。（inline-block 的内部格式化为 block box，元素本身格式化为 atomic inline-level box。）

inline

This value causes an element to generate one or more inline boxes.

此值使元素生成一个或多个 inline boxes。

list-item

This value causes an element (e.g., LI in HTML) to generate a principal block box and a marker box. For information about lists and examples of list formatting, please consult the section on lists.

此值使元素（例如，HTML 中的 LI）生成 principal block box 和 marker box。有关列表和列表格式化示例的信息，请参阅列表部分。

none

This value causes an element to not appear in the formatting structure (i.e., in visual media the element generates no boxes and has no effect on layout). Descendant elements do not generate any boxes either; the element and its content are removed from the formatting structure entirely. This behavior cannot be overridden by setting the 'display' property on the descendants.

此值使元素不出现在格式化结构中（即，在视觉媒体中元素不生成任何 boxes 且对布局没有影响）。后代元素也不生成任何 boxes；元素及其内容完全从格式化结构中移除。此行为无法通过在后代上设置 'display' 属性来覆盖。

Please note that a display of 'none' does not create an invisible box; it creates no box at all. CSS includes mechanisms that enable an element to generate boxes in the formatting structure that affect formatting but are not visible themselves. Please consult the section on visibility for details.

请注意，'none' 的 display 不会创建不可见的 box；它根本不创建任何 box。CSS 包含使元素能够在格式化结构中生成影响格式化但本身不可见的 boxes 的机制。详情请参阅 visibility 部分。

table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, and table-caption

These values cause an element to behave like a table element (subject to restrictions described in the chapter on tables).

这些值使元素表现得像 table element（受表格章节中描述的限制约束）。

The computed value is the same as the specified value, except for positioned and floating elements (see Relationships between 'display', 'position', and 'float') and for the root element. For the root element, the computed value is changed as described in the section on the relationships between 'display', 'position', and 'float'.

计算值与指定值相同，除了定位和浮动元素（参见 'display'、'position' 和 'float' 之间的关系）和 root element。对于 root element，计算值按照 'display'、'position' 和 'float' 之间关系部分中的描述进行更改。

Note that although the initial value of 'display' is 'inline', rules in the user agent's default style sheet may override this value. See the sample style sheet for HTML 4 in the appendix.

请注意，虽然 'display' 的初始值是 'inline'，但用户代理默认样式表中的规则可能会覆盖此值。请参阅附录中 HTML 4 的示例样式表。

9.3 Positioning schemes

In CSS 2.2, a box may be laid out according to three positioning schemes:

在 CSS 2.2 中，box 可以根据三种定位方案进行布局：

Normal flow. In CSS 2.2, normal flow includes block formatting of block-level boxes, inline formatting of inline-level boxes, and relative positioning of block-level and inline-level boxes.

Normal flow。 在 CSS 2.2 中，normal flow 包括 block-level boxes 的 block formatting、inline-level boxes 的 inline formatting，以及 block-level 和 inline-level boxes 的 relative positioning。

Floats. In the float model, a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float.

Floats。 在 float 模型中，box 首先按照 normal flow 进行布局，然后从流中取出并尽可能向左或向右移动。内容可能沿着 float 的侧面流动。

Absolute positioning. In the absolute positioning model, a box is removed from the normal flow entirely (it has no impact on later siblings) and assigned a position with respect to a containing block.

Absolute positioning。 在 absolute positioning 模型中，box 完全从 normal flow 中移除（对后续 siblings 没有影响）并相对于 containing block 分配位置。

An element is called out of flow if it is floated, absolutely positioned, or is the root element. An element is called in-flow if it is not out-of-flow. The flow of an element A is the set consisting of A and all in-flow elements whose nearest out-of-flow ancestor is A.

如果元素被浮动、绝对定位或是 root element，则称为 out of flow。如果元素不是 out-of-flow，则称为 in-flow。元素 A 的 flow 是由 A本身 和 以A为"最近脱离流祖先"的元素 组成的集合。

元素 A 的 flow 就是 A 能"控制"的所有在流元素，这些元素在布局时会受到 A 的影响。

9.3.1 Choosing a positioning scheme: 'position' property

The values of this property have the following meanings:

此属性的值具有以下含义：

static

The box is a normal box, laid out according to the normal flow. The 'top', 'right', 'bottom', and 'left' properties do not apply.

box 是正常的 box，按照 normal flow 进行布局。'top'、'right'、'bottom' 和 'left' 属性不适用。

relative

The box's position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its normal position. When a box B is relatively positioned, the position of the following box is calculated as though B were not offset. The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

box 的位置按照 normal flow 计算（这称为 normal flow 中的位置）。然后 box 相对于其正常位置进行偏移。当 box B 相对定位时，后续 box 的位置计算时就好像 B 没有偏移一样。'position:relative' 对 table-row-group、table-header-group、table-footer-group、table-row、table-column-group、table-column、table-cell 和 table-caption 元素的影响是未定义的。

absolute

The box's position (and possibly size) is specified with the 'top', 'right', 'bottom', and 'left' properties. These properties specify offsets with respect to the box's containing block. Absolutely positioned boxes are taken out of the normal flow. This means they have no impact on the layout of later siblings. Also, though absolutely positioned boxes have margins, they do not collapse with any other margins.

box 的位置（可能还有尺寸）由 'top'、'right'、'bottom' 和 'left' 属性指定。这些属性指定相对于 box 的 containing block 的偏移量。绝对定位的 boxes 从 normal flow 中取出。这意味着它们对后续 siblings 的布局没有影响。此外，虽然绝对定位的 boxes 有 margins，但它们不与任何其他 margins 折叠。

fixed

The box's position is calculated according to the 'absolute' model, but in addition, the box is fixed with respect to some reference. As with the 'absolute' model, the box's margins do not collapse with any other margins. In the case of handheld, projection, screen, tty, and tv media types, the box is fixed with respect to the viewport and does not move when scrolled. In the case of the print media type, the box is rendered on every page, and is fixed with respect to the page box, even if the page is seen through a viewport (in the case of a print-preview, for example). For other media types, the presentation is undefined. Authors may wish to specify 'fixed' in a media-dependent way. For instance, an author may want a box to remain at the top of the viewport on the screen, but not at the top of each printed page. The two specifications may be separated by using an @media rule, as in:

box 的位置按照 'absolute' 模型计算，但此外，box 相对于某个参考点固定。与 'absolute' 模型一样，box 的 margins 不与任何其他 margins 折叠。对于 handheld、projection、screen、tty 和 tv 媒体类型，box 相对于 viewport 固定，滚动时不移动。对于 print 媒体类型，box 在每页上渲染，并相对于 page box 固定，即使页面通过 viewport 查看（例如，在打印预览的情况下）。对于其他媒体类型，呈现是未定义的。作者可能希望以媒体相关的方式指定 'fixed'。例如，作者可能希望 box 在屏幕上保持在 viewport 顶部，但不在每页打印页面的顶部。这两个规范可以通过使用 @media 规则来分离，如下所示：

@media screen { 
  h1#first { position: fixed } 
}
@media print { 
  h1#first { position: static }
}

9.3.2 Box offsets: 'top', 'right', 'bottom', 'left'

An element is said to be positioned if its 'position' property has a value other than 'static'. Positioned elements generate positioned boxes, laid out according to four properties:

如果元素的 'position' 属性值不是 'static'，则称该元素为 positioned。Positioned elements 生成 positioned boxes，根据 top/right/bottom/left 进行布局：

The values for the four properties have the following meanings:

四个属性的值具有以下含义：

The offset is a fixed distance from the reference edge. Negative values are allowed.

偏移量是相对于参考边缘的固定距离。允许负值。

The offset is a percentage of the containing block's width (for 'left' or 'right') or height (for 'top' and 'bottom'). Negative values are allowed.

偏移量是 containing block 宽度（对于 'left' 或 'right'）或高度（对于 'top' 和 'bottom'）的百分比。允许负值。

auto

For non-replaced elements, the effect of this value depends on which of related properties have the value 'auto' as well. See the sections on the width and height of absolutely positioned, non-replaced elements for details. For replaced elements, the effect of this value depends only on the intrinsic dimensions of the replaced content. See the sections on the width and height of absolutely positioned, replaced elements for details.

对于 non-replaced elements，此值的效果取决于哪些相关属性也具有值 'auto'。详情请参阅绝对定位的 non-replaced elements 的宽度和高度部分。对于 replaced elements，此值的效果仅取决于替换内容的固有尺寸。详情请参阅绝对定位的 replaced elements 的宽度和高度部分。

9.4 Normal flow

Boxes in the normal flow belong to a formatting context, which in CSS 2.2 may be table, block or inline. In future levels of CSS, other types of formatting context will be introduced. Block-level boxes participate in a block formatting context. Inline-level boxes participate in an inline formatting context. Table formatting contexts are described in the chapter on tables.

normal flow 中的 boxes 属于 formatting context，在 CSS 2.2 中可能是 table、block 或 inline。在 CSS 的未来版本中，将引入其他类型的 formatting context。Block-level boxes 参与 block formatting context。Inline-level boxes 参与 inline formatting context。Table formatting contexts 在表格章节中描述。

9.4.1 Block formatting contexts

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

以下元素会为其内容建立新的 block formatting contexts：Floats、绝对定位元素、不是 block boxes 的 block containers（如 inline-blocks、table-cells 和 table-captions），以及 'overflow' 不是 'visible' 的 block boxes（除非该值已传播到 viewport）。

In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.

在 block formatting context 中，boxes 垂直地一个接一个布局，从 containing block 的顶部开始。两个 sibling boxes 之间的垂直距离由 'margin' 属性决定。block formatting context 中相邻 block-level boxes 之间的垂直 margins 会折叠。

In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).

在 block formatting context 中，每个 box 的左外边缘接触 containing block 的左边缘（对于从右到左的格式化，右边缘接触）。即使在存在 floats 的情况下也是如此（尽管 box 的 line boxes 可能由于 floats 而收缩），除非 box 建立新的 block formatting context（在这种情况下，box 本身可能由于 floats 而变窄）。

For information about page breaks in paged media, please consult the section on allowed page breaks.

有关分页媒体中分页符的信息，请参阅允许分页符部分。

9.4.2 Inline formatting contexts

An inline formatting context is established by a block container box that contains no block-level boxes. In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes. The boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within them may be aligned. The rectangular area that contains the boxes that form a line is called a line box.

inline formatting context 由不包含 block-level boxes 的 block container box 建立。在 inline formatting context 中，boxes 会水平排列，一个接一个，从 containing block 的顶部开始。这些 boxes 之间的水平 margins、borders 和 padding 都会正常显示。boxes 可以用不同方式垂直对齐：可以按底部对齐、按顶部对齐，或者按文本的 baselines 对齐。包含一行的所有 boxes 的矩形区域叫做 line box。

The width of a line box is determined by a containing block and the presence of floats. The height of a line box is determined by the rules given in the section on line height calculations.

line box 的宽度由 containing block 和 floats 的存在决定。line box 的高度由行高计算部分中给出的规则决定。

A line box is always tall enough for all of the boxes it contains. However, it may be taller than the tallest box it contains (if, for example, boxes are aligned so that baselines line up). When the height of a box B is less than the height of the line box containing it, the vertical alignment of B within the line box is determined by the 'vertical-align' property. When several inline-level boxes cannot fit horizontally within a single line box, they are distributed among two or more vertically-stacked line boxes. Thus, a paragraph is a vertical stack of line boxes. Line boxes are stacked with no vertical separation (except as specified elsewhere) and they never overlap.

line box 总是足够高，能装下它包含的所有 boxes。不过，它可能比最高的 box 还要高（比如，当 boxes 按 baselines 对齐时）。当 box B 的高度小于包含它的 line box 高度时，B 在 line box 里的垂直对齐由 'vertical-align' 属性决定。当几个 inline-level boxes 在水平方向上放不进一个 line box 时，它们会分散到两个或更多垂直堆叠的 line boxes 中。所以，段落就是 line boxes 的垂直堆叠。Line boxes 堆叠时没有垂直间隔（除非特别指定），而且它们从不重叠。

In general, the left edge of a line box touches the left edge of its containing block and the right edge touches the right edge of its containing block. However, floating boxes may come between the containing block edge and the line box edge. Thus, although line boxes in the same inline formatting context generally have the same width (that of the containing block), they may vary in width if available horizontal space is reduced due to floats. Line boxes in the same inline formatting context generally vary in height (e.g., one line might contain a tall image while the others contain only text).

一般来说，line box 的左边会碰到 containing block 的左边，右边会碰到右边。但是，浮动 boxes 可能会插在 containing block 边缘和 line box 边缘之间。所以，虽然同一个 inline formatting context 中的 line boxes 通常宽度一样（都是 containing block 的宽度），但如果因为 floats 而减少了可用的水平空间，它们的宽度就可能不一样。同一个 inline formatting context 中的 line boxes 高度通常也不一样（比如，一行可能包含高图片，其他行只包含文字）。

When the total width of the inline-level boxes on a line is less than the width of the line box containing them, their horizontal distribution within the line box is determined by the 'text-align' property. If that property has the value 'justify', the user agent may stretch spaces and words in inline boxes (but not inline-table and inline-block boxes) as well.

当一行上 inline-level boxes 的总宽度小于包含它们的 line box 宽度时，它们在 line box 里的水平分布由 'text-align' 属性决定。如果这个属性值是 'justify'，用户代理可能会拉伸 inline boxes 中的空格和单词（但不会拉伸 inline-table 和 inline-block boxes）。

When an inline box exceeds the width of a line box, it is split into several boxes and these boxes are distributed across several line boxes. If an inline box cannot be split (e.g., if the inline box contains a single character, or language specific word breaking rules disallow a break within the inline box, or if the inline box is affected by a white-space value of nowrap or pre), then the inline box overflows the line box.

当 inline box 超过 line box 的宽度时，它会被分割成几个 boxes，这些 boxes 分散到几个 line boxes 中。如果 inline box 无法分割（比如，如果 inline box 只包含一个字符，或者语言的断词规则不允许在 inline box 内断行，或者 inline box 受到 white-space 值为 nowrap 或 pre 的影响），那么 inline box 就会溢出 line box。

When an inline box is split, margins, borders, and padding have no visual effect where the split occurs (or at any split, when there are several).

当 inline box 被分割时，margins、borders 和 padding 在分割的地方（或者在有多个分割时的任何分割处）都没有视觉效果。

Inline boxes may also be split into several boxes within the same line box due to bidirectional text processing.

由于双向文本处理，inline boxes 也可能在同一个 line box 内分割成几个 boxes。

Line boxes are created as needed to hold inline-level content within an inline formatting context. Line boxes that contain no text, no preserved white space, no inline elements with non-zero margins, padding, or borders, and no other in-flow content (such as images, inline blocks or inline tables), and do not end with a preserved newline must be treated as zero-height line boxes for the purposes of determining the positions of any elements inside of them, and must be treated as not existing for any other purpose.

Line boxes 根据需要创建，用来在 inline formatting context 里装 inline-level 内容。那些不包含文本、不包含保留的空白、不包含有非零 margins、padding 或 borders 的 inline elements、不包含其他 in-flow 内容（如图片、inline blocks 或 inline tables）且不以保留的换行符结尾的 line boxes，在确定它们内部元素位置时必须被当作零高度的 line boxes，在其他任何用途中都必须被当作不存在。

9.4.3 Relative positioning

Once a box has been laid out according to the normal flow or floated, it may be shifted relative to this position. This is called relative positioning. Offsetting a box (B1) in this way has no effect on the box (B2) that follows: B2 is given a position as if B1 were not offset and B2 is not re-positioned after B1's offset is applied. This implies that relative positioning may cause boxes to overlap. However, if relative positioning causes an 'overflow:auto' or 'overflow:scroll' box to have overflow, the UA must allow the user to access this content (at its offset position), which, through the creation of scrollbars, may affect layout.

一旦 box 按照 normal flow 布局或浮动后，它可能会相对于这个位置进行偏移。这叫做 relative positioning。用这种方式偏移一个 box（B1）对后面的 box（B2）没有影响：B2 的位置就像 B1 没有偏移一样，而且 B1 的偏移应用后，B2 也不会重新定位。这意味着 relative positioning 可能会导致 boxes 重叠。不过，如果 relative positioning 导致 'overflow:auto' 或 'overflow:scroll' 的 box 出现溢出，UA 必须让用户能访问这个内容（在它的偏移位置），这通过创建滚动条可能会影响布局。

A relatively positioned box keeps its normal flow size, including line breaks and the space originally reserved for it. The section on containing blocks explains when a relatively positioned box establishes a new containing block.

相对定位的 box 保持它在 normal flow 中的尺寸，包括换行和原本为它保留的空间。

For relatively positioned elements, 'left' and 'right' move the box(es) horizontally, without changing their size. 'Left' moves the boxes to the right, and 'right' moves them to the left. Since boxes are not split or stretched as a result of 'left' or 'right', the used values are always: left = -right.

对于相对定位的元素，'left' 和 'right' 会水平移动 box(es)，但不会改变它们的尺寸。'Left' 把 boxes 向右移动，'right' 把它们向左移动。因为 boxes 不会因为 'left' 或 'right' 而分割或拉伸，所以实际使用的值总是：left = -right。

If both 'left' and 'right' are 'auto' (their initial values), the used values are '0' (i.e., the boxes stay in their original position).

如果 'left' 和 'right' 都是 'auto'（它们的初始值），实际使用的值就是 '0'（也就是说，boxes 保持在原来的位置）。

If 'left' is 'auto', its used value is minus the value of 'right' (i.e., the boxes move to the left by the value of 'right').

如果 'left' 是 'auto'，它的实际值就是 'right' 值的负数（也就是说，boxes 向左移动 'right' 的值）。

If 'right' is specified as 'auto', its used value is minus the value of 'left'.

如果 'right' 被指定为 'auto'，它的实际值就是 'left' 值的负数。

If neither 'left' nor 'right' is 'auto', the position is over-constrained, and one of them has to be ignored. If the 'direction' property of the containing block is 'ltr', the value of 'left' wins and 'right' becomes -'left'. If 'direction' of the containing block is 'rtl', 'right' wins and 'left' is ignored.

如果 'left' 和 'right' 都不是 'auto'，位置就过度约束了，其中一个必须被忽略。如果 containing block 的 'direction' 属性是 'ltr'，'left' 的值胜出，'right' 变成 -'left'。如果 containing block 的 'direction' 是 'rtl'，'right' 胜出，'left' 被忽略。

The 'top' and 'bottom' properties move relatively positioned element(s) up or down without changing their size. 'Top' moves the boxes down, and 'bottom' moves them up. Since boxes are not split or stretched as a result of 'top' or 'bottom', the used values are always: top = -bottom. If both are 'auto', their used values are both '0'. If one of them is 'auto', it becomes the negative of the other. If neither is 'auto', 'bottom' is ignored (i.e., the used value of 'bottom' will be minus the value of 'top').

'top' 和 'bottom' 属性会上下移动相对定位的元素，但不会改变它们的尺寸。'Top' 把 boxes 向下移动，'bottom' 把它们向上移动。因为 boxes 不会因为 'top' 或 'bottom' 而分割或拉伸，所以实际使用的值总是：top = -bottom。如果两个都是 'auto'，它们的实际值都是 '0'。如果其中一个 'auto'，它就变成另一个的负数。如果两个都不是 'auto'，'bottom' 被忽略（也就是说，'bottom' 的实际值会是 'top' 值的负数）。

9.5 Floats

9.6 Absolute positioning

9.7 Relationships between 'display', 'position', and 'float'

The three properties that affect box generation and layout — 'display', 'position', and 'float' — interact as follows:

影响 box 生成和布局的三个属性 — 'display'、'position' 和 'float' — 按以下方式相互作用：

If 'display' has the value 'none', then 'position' and 'float' do not apply. In this case, the element generates no box.

如果 'display' 的值是 'none'，那么 'position' 和 'float' 就不适用。在这种情况下，元素不会生成任何 box。

Otherwise, if 'position' has the value 'absolute' or 'fixed', the box is absolutely positioned, the computed value of 'float' is 'none', and display is set according to the table below. The position of the box will be determined by the 'top', 'right', 'bottom' and 'left' properties and the box's containing block.

否则，如果 'position' 的值是 'absolute' 或 'fixed'，box 就是绝对定位的，'float' 的计算值是 'none'，display 按照下面的表格设置。box 的位置由 'top'、'right'、'bottom' 和 'left' 属性以及 box 的 containing block 决定。

Otherwise, if 'float' has a value other than 'none', the box is floated and 'display' is set according to the table below.

否则，如果 'float' 的值不是 'none'，box 就是浮动的，'display' 按照下面的表格设置。

Otherwise, if the element is the root element, 'display' is set according to the table below, except that it is undefined in CSS 2.2 whether a specified value of 'list-item' becomes a computed value of 'block' or 'list-item'.

否则，如果元素是 root element，'display' 按照下面的表格设置，不过在 CSS 2.2 中，指定的 'list-item' 值会变成计算值 'block' 还是 'list-item' 是未定义的。

Otherwise, the remaining 'display' property values apply as specified.

否则，其余的 'display' 属性值按指定值应用。

Specified value	Computed value
inline-table	table
inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block	block
others	same as specified

10 Visual formatting model details

10.1 Definition of "containing block"

The position and size of an element's box(es) are sometimes calculated relative to a certain rectangle, called the containing block of the element. The containing block of an element is defined as follows:

元素 box(es) 的位置和尺寸有时会相对于某个矩形计算，这个矩形叫做元素的 containing block。元素的 containing block 按以下方式定义：

1. The containing block in which the root element lives is a rectangle called the initial containing block. For continuous media, it has the dimensions of the viewport and is anchored at the canvas origin; it is the page area for paged media. The 'direction' property of the initial containing block is the same as for the root element.

root element 所在的 containing block 是一个矩形，叫做 initial containing block。对于 continuous media，它的尺寸是 viewport 的尺寸，锚定在 canvas origin；对于 paged media，它是 page area。initial containing block 的 'direction' 属性与 root element 相同。

2. For other elements, if the element's position is 'relative' or 'static', the containing block is formed by the content edge of the nearest ancestor box that is a block container or which establishes a formatting context.

对于其他元素，如果元素的位置是 'relative' 或 'static'，containing block 由最近的祖先 box 的 content edge 形成，这个祖先 box 要么是 block container，要么建立了 formatting context。

3. If the element has 'position: fixed', the containing block is established by the viewport in the case of continuous media or the page area in the case of paged media.

如果元素有 'position: fixed'，containing block 由 continuous media 的 viewport 或 paged media 的 page area 建立。

4. If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed', in the following way:

如果元素有 'position: absolute'，containing block 由最近的 'position' 是 'absolute'、'relative' 或 'fixed' 的祖先建立，按以下方式：

• In the case that the ancestor is an inline element, the containing block is the bounding box around the padding boxes of the first and the last inline boxes generated for that element. In CSS 2.2, if the inline element is split across multiple lines, the containing block is undefined.

如果祖先是一个 inline element，containing block 就是围绕该元素生成的第一个和最后一个 inline boxes 的 padding boxes 的边界框。在 CSS 2.2 中，如果 inline element 跨多行分割，containing block 是未定义的。

• Otherwise, the containing block is formed by the padding edge of the ancestor.

否则，containing block 由祖先的 padding edge 形成。

• If there is no such ancestor, the containing block is the initial containing block.

如果没有这样的祖先，containing block 就是 initial containing block。

In paged media, an absolutely positioned element is positioned relative to its containing block ignoring any page breaks (as if the document were continuous). The element may subsequently be broken over several pages.

在 paged media 中，绝对定位的元素相对于其 containing block 定位，忽略任何分页符（就像文档是连续的一样）。元素随后可能会分散到几个页面中。

For absolutely positioned content that resolves to a position on a page other than the page being laid out (the current page), or resolves to a position on the current page which has already been rendered for printing, printers may place the content

对于解析到正在布局的页面（当前页面）之外的位置，或解析到当前页面已经为打印渲染的位置的绝对定位内容，打印机可能会把内容放在：

• on another location on the current page,
• on a subsequent page, or
• may omit it.

10.2 Content width: the 'width' property

10.3 Calculating widths and margins

The values of an element's 'width', 'margin-left', 'margin-right', 'left' and 'right' properties as used for layout depend on the type of box generated and on each other. (The value used for layout is sometimes referred to as the used value.) In principle, the values used are the same as the computed values, with 'auto' replaced by some suitable value, and percentages calculated based on the containing block, but there are exceptions. The following situations need to be distinguished:

元素在布局中使用的 'width'、'margin-left'、'margin-right'、'left' 和 'right' 属性值取决于生成的 box 类型以及它们彼此之间的关系。（用于布局的值有时被称为 used value。）原则上，使用的值与计算值相同，'auto' 被某个合适的值替换，百分比基于 containing block 计算，但也有例外。需要区分以下情况：

1. inline, non-replaced elements
2. inline, replaced elements
3. block-level, non-replaced elements in normal flow
4. block-level, replaced elements in normal flow
5. floating, non-replaced elements
6. floating, replaced elements
7. absolutely positioned, non-replaced elements
8. absolutely positioned, replaced elements
9. 'inline-block', non-replaced elements in normal flow
10. 'inline-block', replaced elements in normal flow

10.4 Minimum and maximum widths: 'min-width' and 'max-width'

In CSS 2.2, the effect of 'min-width' and 'max-width' on tables, inline tables, table cells, table columns, and column groups is undefined.

在 CSS 2.2 中，'min-width' 和 'max-width' 对 tables、inline tables、table cells、table columns 和 column groups 的影响是未定义的。

The following algorithm describes how the two properties influence the used value of the 'width' property:

以下算法描述了这两个属性如何影响 'width' 属性的 used value：

1. The tentative used width is calculated (without 'min-width' and 'max-width') following the rules under "Calculating widths and margins" above.

按照上面"计算宽度和边距"中的规则计算 tentative used width（不考虑 'min-width' 和 'max-width'）。

2. If the tentative used width is greater than 'max-width', the rules above are applied again, but this time using the computed value of 'max-width' as the computed value for 'width'.

如果 tentative used width 大于 'max-width'，则再次应用上述规则，但这次使用 'max-width' 的计算值作为 'width' 的计算值。

3. If the resulting width is smaller than 'min-width', the rules above are applied again, but this time using the value of 'min-width' as the computed value for 'width'.

如果结果宽度小于 'min-width'，则再次应用上述规则，但这次使用 'min-width' 的值作为 'width' 的计算值。

10.5 Content height: the 'height' property

10.6 Calculating heights and margins

For calculating the values of 'top', 'margin-top', 'height', 'margin-bottom', and 'bottom' a distinction must be made between various kinds of boxes:

1. inline, non-replaced elements
2. inline, replaced elements
3. block-level, non-replaced elements in normal flow
4. block-level, replaced elements in normal flow
5. floating, non-replaced elements
6. floating, replaced elements
7. absolutely positioned, non-replaced elements
8. absolutely positioned, replaced elements
9. 'inline-block', non-replaced elements in normal flow
10. 'inline-block', replaced elements in normal flow

10.7 Minimum and maximum heights: 'min-height' and 'max-height'

10.8 Line height calculations: the 'line-height' and 'vertical-align' properties

As described in the section on inline formatting contexts, user agents flow inline-level boxes into a vertical stack of line boxes. The height of a line box is determined as follows:

如 inline formatting contexts 部分所述，user agents 将 inline-level boxes 流入 line boxes 的垂直堆栈中。line box 的高度按以下方式确定：

1. The height of each inline-level box in the line box is calculated. For replaced elements, inline-block elements, and inline-table elements, this is the height of their margin box; for inline boxes, this is their 'line-height'. (See "Calculating heights and margins" and the height of inline boxes in "Leading and half-leading".)

计算 line box 中每个 inline-level box 的高度。对于 replaced elements、inline-block elements 和 inline-table elements，这是它们的 margin box 高度；对于 inline boxes，这是它们的 'line-height'。（参见"计算高度和边距"和"行间距和半行间距"中 inline boxes 的高度。）

2. The inline-level boxes are aligned vertically according to their 'vertical-align' property. In case they are aligned 'top' or 'bottom', they must be aligned so as to minimize the line box height. If such boxes are tall enough, there are multiple solutions and CSS 2.2 does not define the position of the line box's baseline (i.e., the position of the strut, see below).

根据 'vertical-align' 属性垂直对齐 inline-level boxes。如果它们对齐为 'top' 或 'bottom'，则必须对齐以最小化 line box 高度。如果这样的 boxes 足够高，则有多个解决方案，CSS 2.2 不定义 line box 的 baseline 位置（即 strut 的位置，见下文）。

3. The line box height is the distance between the uppermost box top and the lowermost box bottom. (This includes the strut, as explained under 'line-height' below.)

line box 高度是最高 box 顶部和最低 box 底部之间的距离。（这包括 strut，如下面 'line-height' 下所解释的。）

Empty inline elements generate empty inline boxes, but these boxes still have margins, padding, borders and a line height, and thus influence these calculations just like elements with content.

空的 inline elements 生成空的 inline boxes，但这些 boxes 仍然有 margins、padding、borders 和 line height，因此像有内容的 elements 一样影响这些计算。