CSS 规格 - 原子内联水平盒

Question

我正在努力思考 CSS 的一些细节，但我发现 W3 CSS Visual Formatting Spec 9.2.2 的这部分摘录特别迟钝：

Inline-level boxes that are not inline boxes (such as replaced inline-level elements, inline-block elements, and inline-table elements) are called atomic inline-level boxes because they participate in their inline formatting context as a single opaque box.

单个不透明框到底是什么意思？

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

Answer 1

这意味着该框是一个单一的实体单元，当其文本不能全部放在一行中时，它不能像行内框那样跨行拆分。请参阅 section 9.4.2，它描述了这种分裂行为以及术语 "inline formatting context" 和 "line box"。

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

比较：

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

span {
    background-color: #d0d0d0;
}

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

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

Answer 2

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

An inline box is one that is both inline-level and whose contents participate in its containing inline formatting context.

之后是您的报价。

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

sample <span>placeholder text</span> here

如您所见，所有元素都以内联方式呈现，经过简化即尽可能在同一行呈现。
现在什么是原子内联框，你的引述是什么意思？
首先，让我们看下面的例子：

.at {
  display: inline-block;
}

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

本例中的原子框是 class at 的分隔符。它作为内联元素参与渲染，但它的子元素可以以与内联定位不同的任何方式定位。它是关于内联渲染的单个不透明框。

CSS 规格 - 原子内联水平盒

CSS Spec - Atomic Inline Level Boxes

css

specifications