9.2 控制盒的产生(done) - acelan86/css GitHub Wiki

本章可能比较疑问的名词:

  • 可被重放置元素:有内置宽高的元素,比如input,img等
  • 不可被重放置元素:除可被重放置元素外的其他元素
  • 待补充

接下来的段落描述可能在CSS2.1中生成的盒子的类型。从某种程度上说,盒子类型会影响它在可视化格式模型中的行为。下面要描述的“display”属性,用来指定盒子的类型。

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

9.2.1 块级元素(block-level elements)和块盒(block boxes)

块级元素(block-level elements)是指那些在源文档中以块方式来格式化展现的元素(例如,段落)。下面的这些display属性的值使一个元素成为块级元素:“block”,“list-item”和“table”。

Block-level elements are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). The following values of the 'display' property make an element block-level: 'block', 'list-item', and 'table'.

块级盒(block-level boxes)是指那些作用在块格式化上下文中的盒。每个块级元素生成一个主要块级盒,这个块级盒包含了块级元素的子孙盒以及生成的内容,并且同时参与定位方案。除了主要块级盒外,有些块级元素还可能会生成额外的盒子:比如“list-item”元素。这些额外的盒子的位置与主要块级盒相关。

Block-level boxes are boxes that participate in a block formatting context. Each block-level element generates a principal block-level box that contains descendant boxes and generated content and is also the box involved in any positioning scheme. Some block-level 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.

除了table盒(将在后面的章节进行描述)与可被重放置元素(replaced elements)之外,一个块级盒也是一个块容器(盒)(block container box)。一个块容器(盒)只能包含块级盒或者建立一个行内格式化上下文只包含行内盒的1。不是所有的块容器(盒)都是块级盒:不可被重放置的行内块和不可被重放置的table cell是块容器(盒)但不是块级盒2。同时是块容器的块级盒称为块盒3

Except for table boxes, which are described in a later chapter, and replaced elements, a block-level box is also a block container box. A block container box either contains only block-level boxes or establishes an inline formatting context and thus contains only inline-level boxes. Not all block container boxes are block-level boxes: non-replaced inline blocks and non-replaced table cells are block containers but not block-level boxes. Block-level boxes that are also block containers are called block boxes.

译注1:这里定义了块容器只能包含块级盒,或者建立行内格式化上下文,两者不能同时存在,也就是下面讲到的为什么需要匿名盒的概念,用来保证不会同时存在包含块级盒和行内盒。

译注2:non-replaced inline boxe和non-replaced table cell是啥东西? 这里有一些描述what-is-replaced-inline-element

“块级盒block-level box”, “块容器(盒)block container box ”,“块盒block box”这三个术语有时候被明确的简写成”块block”1

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

译注1:个人觉得,这里的块容器不用太在意“块”这个字,认为它是个容器盒的概念就行了,这里的三个术语都属于控制盒。

9.2.1.1 匿名块盒(anonymous block boxes)

文档中这样的代码:

In a document like this:

<div>
    some text
    <p>more test
</div>

(并且假设div和p都有属性“display:block”),div看起来有行内内容跟块内容。为了把定义格式化变得简单,我们假设这里存在一个匿名块盒包围“some text”。

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

匿名盒 D 图中展示了三个盒子,其中有一个是上文说到的匿名盒子

换句话说:如果一个块容器(盒)(就像上面div生成的那个)内部有一个块级盒(就像上面的P),那么我们强制它的内部必须只能有块级盒。

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.

当一个行内盒包含一个流内的块级盒时,该行内盒(还有与它在同一个line box(行盒)的它的行内祖先1)将在这个块级盒(还有任何连续的或者只被重复的空白和/或流外元素分开的块级兄弟结点)的周围被折断,从而分割成两个盒子(即使分割后的两个盒子中有一边盒子的内容是空的),每一边都是一个块级盒。在折断位置前后的所有line box都被匿名块盒围住,而行内盒中的那个块级盒变成这些匿名块盒的兄弟节点。当这样一个行内盒被相对定位方式影响时,最终任何的变化都会影响包含在这个行内盒中的块级盒。

译注1:这里需要读读下面的什么叫line box,什么叫在同一个line box。

When an inline box contains an in-flow block-level box, the inline box (and its inline ancestors within the same line box) are 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.

下面展示的例子应用了这个模型:

This model would apply in the following example if the following rules:

p{ display: inline }
span{ display:block }

使用上面css的文档如下:

were used with this HTML document:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <HEAD>
        <TITLE>Anonymous text interrupted by a block</TITLE>
    </HEAD>
    <BODY>
        <P>
            This is anonymous text before the SPAN.
            <SPAN>This is the content of SPAN.</SPAN>
            This is anonymous text after the SPAN.
        </P>
    </BODY>

P元素包含一个匿名文本片段(C1),后面跟着一个块级元素,后面再跟着另外一个匿名文本片段(C2)。最终的盒子将会是一个体现在BODY中的块盒,它包含了一个包裹C1的匿名块盒,SPAN块盒和另外一个包裹C2的匿名块盒。

The P element contains a chunk (C1) of anonymous text followed by a block-level element followed by another chunk (C2) of anonymous text. The resulting boxes would be a block box representing the BODY, containing an anonymous block box around C1, the SPAN block box, and another anonymous block box around C2.

匿名块盒的属性继承自包裹它的非匿名盒(例如,本小节"匿名块盒"标题下面的那个例子, DIV的那个)。不可被继承的属性使用它们的默认值。举个例子,匿名盒的font属性继承自DIV,但是margin是0.

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.

在引起匿名块盒生成的元素上设置的属性也作用于这些匿名块盒和它的内容。例如,在上面的例子中,如果给P元素设置border,border将围在C1(结尾的线是开的)和C2(起始的线是开的)周围。1

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

译注1:见本项目中example2.html的运行结果 break inline element

有些客户端代理用其他方法来实现行内包含块上的边框,例如, 通过包裹嵌套在“匿名line box”中的盒子在这些盒子的周围绘制边界。由于CSS1和CSS2没有定义这个行为,只支持CSS1和只支持CSS2的用户代理用替代模型实现这个做法,也声称符合CSS2.1的这部分描述。这并不适用于在这个规范发布后开发的客户端代理。

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.1. This does not apply to UAs developed after this specification was released.

当解决百分比值时匿名块盒将被忽略而使用最接近的非匿名祖先盒(译注:这里应该指的是非匿名的祖先元素的包含块)将被用来替代。例如,如果上面那个例子中,DIV的匿名块盒的儿子节点需要知道它的包含块的高度以用于解决百分比高度问题,它将使用DIV形成的那个包含块的高度,而不是匿名块盒的高度。

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.

9.2.2 行内级元素(inline-level elements)和行内盒(inline boxes)

行内级元素是指源文档中不为内容生成新块的那些元素;内容被分配在多行(例如,一个段落中的强调部分,行内图片等等)。下面的“display”值将元素变成行内级:“inline”,“inline-table”,和“inline-block”。行内级元素生成行内级盒,这些盒处于一个行内格式化上下文中。

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.

行内盒是指它是行内级的并且它的内容处于它的包含行内格式化上下文中。一个“display”值为“inline”的不可被重放置元素生成一个行内盒。不是行内盒的行内级盒(例如可重放置的行内级元素replaced inline elements,行内块元素inline-block elements和行内table元素inline-table elements)被称为原子行内级盒因为它们以一个简单的不透明盒方式参与它们的行内格式化上下文。

译注:这都是什么跟什么啊~

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.

读者注:块级元素生成块级盒,作用于块格式化上下文,块级盒也是块容器盒;行级元素生成行级盒,作用于行格式化上下文,display属性为inline的非替换元素生成行内盒;inline-block元素是行级元素,它自身作用于行格式化上下文,它生成的是块容器盒,该盒可以包含块级元素或行级元素。扯这么多就是说它是什么跟它生成的是什么没必然关系。 ---by fedeoo

读者注:原子行内级盒不可被折断 见: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Visual_formatting_model

#### 9.2.1.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.

像下面这样的一段html标记文档:

In a document with HTML markup like this:

<p>some <em>emphasized</em> text</p>

<p>生成一个块盒,内部包含了一些行内盒。包含“emphasized”文本的盒子是一个通过行内元素(<em>)生成的行内盒,而其他的盒子(“some”和“text”)是通过块级元素(<p>)生成的行内盒,因为它们没有一个与之相关联的行内级元素。

The

generates a block box, with several inline boxes inside it. The box for "emphasized" is an inline box generated by an inline element (), but the other boxes ("Some" and "text") are inline boxes generated by a block-level element (

). The latter are called anonymous inline boxes, because they do not have an associated inline-level element.

这些匿名行内盒从他们的父块级盒继承可继承属性。不可继承的属性使用它们的默认值。在这个例子中,匿名行内盒的颜色继承自P,但背景是透明的。

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”的属性值依次被折叠而不会生成任何匿名行内盒。

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.

9.2.3 run-in boxes(怎么翻译它的名字?)

[该节的存在是为了使章节号和之前的草案一致。“display:run-in”现在定义在CSS3中(详见css基本盒模型)。]

9.2.4 “display”属性

“display”

value: inline|block|list-item|inline-block|table|inline-table|table-row-group|table-header-group|table-footer-group|table-row|table-column-group|table-column|table-cell|table-caption|none|inherit

initial: inline

applies to: all elements

inherited: no

percentages: N/A

media: all

computed value: see text

这个属性的值含义如下: block


重点内容:

  • 块级盒:由块级元素生成,处于块格式化上下文(BFC)中,以块方式布局

  • 块容器盒:只能包含块级盒或者建立行内格式化上下文(IFC),只包含行内级盒。

  • 块盒:既是块级盒又是快容器盒

  • 匿名块盒:为了满足快容器的布局要求而定义出来的一种不具名的块盒

  • 行内盒:行内级的,并处于行内格式化上下文(IFC)中,以行内方式布局

  • 匿名行内盒:直接包含在块容器盒中的文本被当作是一个匿名行内盒。

  • 一个匿名盒是匿名行内盒或者是匿名块盒跟它所属的上下文相关(块级或者行内,这个快容器布局条件中只能包含块级盒或者只能包含行内盒相关联)。

  • 本章讲的所有盒子相关的术语(上面这些)都属于控制盒的范畴。

⚠️ **GitHub.com Fallback** ⚠️