块 - 容器框内的内联和块级框 [英] Inline- and block-level boxes inside the block-container box

问题描述

在CSS规范中， 9.2.1 说：

除了在后面章节中描述的表格盒和
替换的元素之外，块级框也是块容器箱。 A
块容器框仅包含块级框或
建立内联格式上下文，因此只包含
行内框。
考虑标记：

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. Consider the markup:

<div id="d">
    <div>Anonymous text</div>
    <span>Some text</span>
    <span>Another some text</span>
    <div>Another anonymous text</div>
</div>

和样式：

div#d{
    width: 300px;
    height: 300px;
    background: aqua;
}

在我的情况下 div＃d 包含块级和内联级框。但在第二。 9.2.1.1 说，

In my case div#d contains block-level and inline-level boxes. But in the sec. 9.2.1.1 said that

如果一个块容器框（例如为上面的DIV生成的框）
里面有一个块级框（例如上面的P） ，然后我们强制
它只有块级框里面。

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.

问：为什么我们可以放在块级元素（例如 div ），并且它们将显示为内联和块元素，但在规范中表示块容器框只包含块级框或建立一个内联格式化上下文，因此只包含内联级框。

Q: Why we can put inside the block-level element (e.g. div) both inline and block elements and they will displayed as inline and block element, but in spec said that block container box either contains only block-level boxes or establishes an inline formatting context and thus contains only inline-level boxes.

我很困惑。你可以消除我的疑惑吗？

I'm confused. Can you dispel my doubts?

推荐答案

规格说：

分隔符之前和分隔符之后的行框包含在匿名块框中，而块级框将成为这些匿名框的兄弟元素

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

内联元素被封装在匿名块（由浏览器中的CSS引擎生成，并且对DOM检查器不可见）中，这是块级的，因此容器的所有子级都是块级的，而不是混合块和内联元素。

So the inline elements are wrapped in "anonymous blocks" (generated by the CSS engine in the browser, and invisible to your DOM inspector), that are block-level, and all children of the container are therefore block-level, instead of a mix of block- and inline-elements.

这篇关于块 - 容器框内的内联和块级框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！