内嵌盒与原子内嵌盒的区别

Question

考虑以下代码：

<div></div>

div{
    display: inline-block;
}

div块现在是生成原子内嵌级框。正如在规格说明。9.2.2中所说的

非内联框(如替换的内联级元素、内联块元素和内联表元素)称为原子内联级框，因为它们作为单个不透明框参与其内联格式设置上下文。

在这种情况下“不透明”意味着什么？内联框是否作为透明框参与内联格式上下文？

所以我感兴趣的是原子内插层盒和内嵌盒之间有什么区别？

Answer 1

来自WC3 CSS2.1规范，第9视觉格式模型：章

内联框是一个内联级别的框，其内容参与其包含的内联格式上下文。非替换元素的“显示”值为“内联”，将生成内联框。 非内联框(如替换的内联级元素、内联块元素和内联表元素)的内联级框称为原子内联级框，因为它们将内联格式上下文作为单个不透明框参与其中。

因此

• 带有display: inline的元素生成内联框。
• 具有display: inline-table | inline-block和替换的内联级元素(如<img>)的元素将生成内联级原子框。

关于opaque是什么意思的问题，@BoltClock在这里用一种很好的方式解释了这个问题：

CSS原子内联级别框

不透明的意味着该框是一个单一的实体单元，当它的文本不能全部放在一行时，它不能像内联框那样被分割成一行。

这是我的一些额外的细节，这可能会有帮助。

内联级框包括框.

• ...whose内容参与其包含的内联格式上下文
  • 这些被称为内联框。
  • 它们是由display: inline元素生成的。
  • 注意"...whose内容参与其包含的.“字样。这意味着内联级子元素在此内联级别框中，与父元素处于相同的内联格式上下文中。这又意味着，如果有空白(且white-space属性没有更改)，则单独的子内联级别元素将分离并降至新行。实际上，父内联框将拆分为多个框。在这里，父内联框中的所有内联级元素都位于一个很大的内联格式上下文中。

​

• ...that以单个不透明框的形式参与其内联格式设置上下文。
  • 这些被称为原子内联级别的盒子。
  • 它们是由display: inline-table | inline-block | inline-flex | inline-grid元素生成的。
  • 不透明意味着这个盒子是一个单一的实心盒子。
  • 这样做的一个结果是，该框不能被拆分，即使它内的内联级别的框通常应该落在下一行。
  • 相反，滚动条将出现。
  • 此原子内联级别框中的内容不参与与其父框相同的内联格式上下文。

​

最后，正如所看到的，内联级别的框是一组超级的内联框。

希望这对未来的人有帮助。

Answer 2

确实如此。提及视觉格式模型

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

匿名内联框从其块父框继承可继承属性。非继承属性具有它们的初始值。在本例中，匿名内联框的颜色是从P继承的，但是背景是透明的。