Html 内联框和原子内联框之间的区别

考虑以下代码：

<div></div>

div{
    display: inline-block;
}

div{
显示：内联块；
}

div块现在是原子内联级别框生成的。如中所说

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

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

所以我很感兴趣的是原子内联水平框和内联框之间的区别是什么。指

一些强调的文本

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

---

来自WC3 CSS2.1规范第章

内联框是一个内联级别的框，其内容是 参与其包含的内联格式上下文A “display”值为“inline”的未替换元素生成 内联框

非内联框的内联级别框（例如 替换了内联级别元素、内联块元素和 内联表元素）称为原子内联级别的框，因为 它们作为单个不透明对象参与其内联格式上下文 盒子

因此

• 带有

  显示的元素：inline

  生成内联框
• 具有

  显示的元素：内联表|内联块

  和替换的内联级元素（如
  ）生成内联级原子框

关于你提出的“不透明”是什么意思的问题，@BoltClock在这里用很好的方式解释了这一点：

不透明表示长方体是一个单一的实体单元，并且 不能像内联框在其文本 不能全部放在一行中

---

这是我提供的一些额外细节，可能会有所帮助 内联级别框包括框…

• …其内容参与其包含的内联格式上下文
  • 这些称为内联框
  • 它们由具有

    display:inline

  • 请注意“其内容参与其包含…”字样。这意味着此内联级别框中的内联级别子元素与父元素处于相同的内联格式上下文中。这反过来意味着，如果存在空白（并且

    空白

    属性未更改），则单个子内联级元素将分离并落在新行中。实际上，父内联框将拆分为多个框。在这里，父内联框中的所有内联级别元素都位于一个大的内联格式上下文中
• …作为单个不透明框参与其内联格式上下文
  • 这些称为原子内联级别框
  • 它们由具有

    display:inline table | inline block | inline flex | inline grid的元素生成

  • 不透明表示长方体是单个实心长方体
  • 这样做的结果是，即使框内的内联级别框通常会落在下一行，也无法拆分框
  • 相反，会出现滚动条
  • 此原子内联级别框中的内容与其父项不在同一内联格式上下文中

最后，如图所示，内联级别框是内联框的超级集合

---

希望这对将来的人有所帮助。

匿名阻止与我的问题有什么关系？我对原子内联级框和内联框的区别感兴趣。普通内联框被称为匿名内联框。不仅内联表和内联块，内联flex和内联网格也是原子的。

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