html - block 级盒子是否封装在线路盒子中？

Question

W3C 规范中是否有某处指定 block 级框自动包围在行框中？

背景

据我们所知，vertical padding and border of inline boxes do not affect line box height .反过来，行框高度是行内框影响后续内容位置的唯一特征。反过来，这意味着 内联框 上的填充/边框会渗入周围的内容。

引自 W3C CSS 2.1，Chapter 10 :

Although margins, borders, and padding of non-replaced elements do not enter into the line box calculation, they are still rendered around inline boxes. This means that if the height specified by line-height is less than the content height of contained boxes, backgrounds and colors of padding and borders may "bleed" into adjoining line boxes.

请注意它是怎么说的:“渗入相邻的行框”。

我做了一个测试并注意到它实际上也渗入了相邻的 block 级框。

.one {
  border: 1px solid green;
}
.two {
  border: 1px solid red;
}
.three {
  line-height: normal;
  border: 1px solid blue;
  padding: 10px 0;
}

  <div class="one">test</div>
  
  <span class="two">
    <span class="three">test two</span>
    x
  </span>

因此，我想知道，它是否在规范中的任何地方说 block 级框也被行框包围？我只能在 inline formatting context 下找到相关的 line box 详细信息，其中只有行内级框参与。

谢谢。

Answer 1

我实际上不确定是否可以说 block 级框与行框相邻(反之亦然)。但是，在您的示例中，实际上有两个行框 - 一个由 div.one 在通过建立内联格式化上下文格式化其内联内容时生成，另一个由 生成>body 元素在格式化 span.two(及其 span.three 子元素)时——以及 div.one 中的行框可以说是与包含span.two 和span.three 的相邻。

为了绘制行内框，哪个 block 容器生成与包含这些行内框的行框相邻的行框并不重要。任何 block 容器是否也建立了 block 格式化上下文甚至都没有关系。这就是为什么您会看到 span.three 的行内框渗入 div.one 内的行框。

block 级框不能直接与行框共存，根据“ block 级”的定义，它也不能包含在行框内(回答你的标题)。在您的示例中，呈现 span 的行框位于 anonymous block box 中。然后将其布置为 div 的同级元素。该匿名 block 框为 span 建立了自己的内联格式化上下文，就像 div 为其文本所做的一样。