css2 - Visual formatting model

Visual formatting model -- 视觉格式化模型

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.

浏览器如何处理可视媒体的文档树

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:

• box dimensions and type.
• positioning scheme (normal flow, float, and absolute positioning).
• relationships between elements in the document tree.
• external information (e.g., viewport size, intrinsic dimensions of images, etc.).

在视觉格式化模型中,文档树中的元素根据盒模型生成一个或多个盒子,这些盒子的布局由如下控制:

• 盒模型的尺寸与类型
• 定位方式（正常文档流,float 与绝对定位）
• 文档树中的关系
• 外部信息(如视图大小,图像内部尺寸等)

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 可能会有些不同

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.

视觉格式化模型并没有定义所有的地方的格式化(比如他没有定义字母间的距离),在本概念没有覆盖的地方,各个浏览器的描述可能不同

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).

浏览器会提供一个视图，用户可以通过该区域查阅文档,当调整视图大小时,UA会更改文档的布局

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).

当视图小于画布的大小,UA会提供滚动机制,每个画布只有存在一个视图里,一个视图可以渲染多个画布

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.
Each box is given a position with respect to its containing block, but it is not confined by this containing block; it may overflow.
The details of how a containing block's dimensions are calculated are described in the next chapter.

盒子模型的位置是根据边缘进行确定的

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.
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可以设置盒子的类型
Controlling box是box在进行尺寸计算或是定位时都的一个参考物,通常为其父类(即box产生后,会充当起子box的Controlling box)

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.

略

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.

display = [block | list-item | inline-block]
块级盒子通常可以作为container box存在(除了table 或替换元素)
块级盒子只包含子块级盒子或多个行内元素(inline-level boxes)
并非只有block才可以使container box,非替换的inline-block,table cells 都可以是block containers

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".

anon-block.png

假设div与p 都是 display=block,那么div同时包含了块级和行内元素,为了更方便的格式化元素,我们假定某些文本被匿名块级盒子包含

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.

我们会强行保证,块级元素内只存在行内标签或块级元素的规定

When an inline box contains an in-flow block-level box, the inline box (and its inline ancestors within the same line box) is broken around the block-level box (and any block-level siblings that are consecutive or separated only by collapsible whitespace and/or out-of-flow elements), splitting the inline box into two boxes (even if either side is empty), one on each side of the block-level box(es). The line boxes before the break and after the break are enclosed in anonymous block boxes, and the block-level box becomes a sibling of those anonymous boxes. When such an inline box is affected by relative positioning, any resulting translation also affects the block-level box contained in the inline box.

行内元素包含块级元素时,行内元素(及其行内元素祖先)将在块级元素周围断开,断开后的元素将被匿名框包裹并与块级元素组成兄弟盒子,当行内元素受到相对定位的影响是,也会影响到匿名盒子

The properties of anonymous boxes are inherited from the enclosing non-anonymous box (e.g., in the example just below the subsection heading "Anonymous block boxes", the one for DIV). Non-inherited properties have their initial value. For example, the font of the anonymous box is inherited from the DIV, but the margins will be 0.
Properties set on elements that cause anonymous block boxes to be generated still apply to the boxes and content of that element. For example, if a border had been set on the P element in the above example, the border would be drawn around C1 (open at the end of the line) and C2 (open at the start of the line).
Some user agents have implemented borders on inlines containing blocks in other ways, e.g., by wrapping such nested blocks inside "anonymous line boxes" and thus drawing inline borders around such boxes. As CSS1 and CSS2 did not define this behavior, CSS1-only and CSS2-only user agents may implement this alternative model and still claim conformance to this part of CSS 2.2. This does not apply to UAs developed after this specification was released.
Anonymous block boxes are ignored when resolving percentage values that would refer to it: the closest non-anonymous ancestor box is used instead. For example, if the child of the anonymous block box inside the DIV above needs to know the height of its containing block to resolve a percentage height, then it will use the height of the containing block formed by the DIV, not of the anonymous block box.

关于匿名盒子的css继承,border显示,百分比等
总之就是匿名box对渲染的影响不大

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.
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-level elements（行内元素）,在文档流中不会产生新的内容块,内容上以行进行呈现,会生成 inline-level boxes,最终由这些盒子参与渲染
display = [inline | inline-table | inline-block]

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.

包含在块级元素内的任何文本都被视为匿名行内盒子

In a document with HTML markup like this:

<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生成了一个块级盒子,内部包含多个行内盒子。强调盒子是由行内元素em生成,其他文本则是有块级盒子生成的匿名行内盒子(没有关联的行内元素)

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.
White space content that would subsequently be collapsed away according to the 'white-space'property does not generate any 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.
There are more types of anonymous boxes that arise when formatting tables.
描述继承等内容,略

2.3 Run-in boxes

[This section exists so that the section numbers are the same as in previous drafts. 'Display: run-in' is now defined in CSS level 3 (see CSS basic box model).]

run-in 间接
吐槽
实现的少,用的也少

2.4 The 'display' property

display 的类型,略

3 Positioning schemes

有三种定位方案

1.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.
2.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.
3.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.

1.正常流
2浮动
在浮动模型中,根据正常流布置一个盒子,然后从流中取出并尽可能的向一侧移动
3.绝对定位
将盒子从正常流中完全取出

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.

浮动,绝对与根元素都被称为脱离文档流

3.1 Choosing a positioning scheme: 'position' property

The 'position' and 'float' properties determine which of the CSS 2.2 positioning algorithms is used to calculate the position of a box.

position与float决定了css2的定位算法

static

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

正常文档流,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.

根据正常文档流进行偏移,该属性对于table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and 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.

脱离文档流进行偏移,根据 containing block 进行偏移,不会与其他margin进行合并

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:

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

UAs must not paginate the content of fixed boxes. Note that UAs may print invisible content in other ways. See "Content outside the page box" in chapter 13.
User agents may treat position as 'static' on the root element.

根据绝对模型进行计算,相对于某个固定的参考物。
handheld, projection, screen, tty, and tv下以视区进行参考
print 会在每一页呈现,以页面框为参考
其他类型未定义
可通过@media的方式进行不同媒体的区分

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 均有以上四个偏移属性

其他略

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.

文档流属于格式化上下文( formatting context)，在css2中它可以使 table,block,inline。在未来可能会引入其他格式化上下文

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.

• float
• absolute
• display = inline-block、table-cells、table-captions
• overflow != visible
  以上情况都会生成新的bfc

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.

统一bfc中margin会进行折叠

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).

bfc中,盒子边缘存在容器的边缘内(float也是如此)
也可以说是float参与计算bfc宽高

注:
即可以清楚浮动
也可用于两列布局(导航+内容,不需要内容环绕)

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

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.

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.

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.

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).

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.

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.

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 boxes may also be split into several boxes within the same line box due to bidirectional text processing.

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.