CSS Spec - 原子内联级别框

Question

我试图将我的大脑包裹在CSS的一些更精细的点上，我发现这部分内容来自W3 CSS Visual Formatting Spec 9.2.2特别迟钝：

  

非内联框的内联级框（例如替换的内联级元素，内联块元素和内联表元素）称为原子内联级框，因为它们作为一个不透明的盒子。

单个不透明盒子究竟是什么意思？

非常感谢任何澄清。谢谢！

Answer 1

这意味着该框是一个单一的实体单元，并且当它的文本不能全部适合单行时，它不能像内联框一样分开。请参阅section 9.4.2，其中介绍了此拆分行为和术语＆＃34;内联格式设置上下文＆＃34;和＆＃34;线框＆＃34;。

如果某一行上不再有任何空间来容纳原子内联框，那么整个框会换行到下一行，如果有换行符（否则会溢出行框）即使原子内联框包含的内联内容部分适合当前行的剩余空间。这是因为原子内联的内联内容不参与与原子内联本身相同的内联格式化上下文 - 它参与原子内联框中的单独内联格式化上下文，并且因此必须保持在原子内联框的边界内。

比较

＆＃13;

＆＃13;

p {
    width: 5em;
    background-color: #f0f0f0;
}

span {
    background-color: #d0d0d0;
}

.inline-block {
    display: inline-block;
    width: 4.5em;
}

＆＃13;

<p>text <span class=inline>inline text</span> more text
<p>text <span class=inline-block>inline block</span> more text

＆＃13;

＆＃13;

＆＃13;

Answer 2

要理解这个概念，您需要从链接到的相同规范点获得一些额外的上下文，即：

  

内联框既是内联级又是内容   参与其包含的内联格式化上下文。

之后你的报价如下。

这意味着内联框也会将其内容呈现为内联，例如，请参阅以下内容：

＆＃13;

＆＃13;

sample <span>placeholder text</span> here

＆＃13;

＆＃13;

＆＃13;

如您所见，所有元素都是内嵌呈现的，简化后意味着在可能的情况下在同一行上 现在什么是原子内联框，你的报价是什么意思？ 首先，让我们看一下以下示例：

＆＃13;

＆＃13;

.at {
  display: inline-block;
}

＆＃13;

sample <div class="at"><div>placeholder</div><div>text</div></div>here

＆＃13;

＆＃13;

＆＃13;

在这种情况下，原子框是具有类at的分隔符。它参与渲染作为内联元素，但其子元素可以以与内联定位分开的任何方式定位。它是关于内联渲染的单个不透明框。