CSS规范-原子内联水平盒 [英] CSS Spec - Atomic Inline Level Boxes

问题描述

我试图将自己的脑筋围绕CSS的一些细节，我从

I'm trying to wrap my brain around some of the finer points of CSS and I found this portion of this excerpt from the W3 CSS Visual Formatting Spec 9.2.2 particularly obtuse:

不是内联框的内联级框(例如替换的内联级元素，内联块元素和内联表元素)被称为原子内联级框，因为它们以的形式参与其内联格式设置上下文>单个不透明框.

单个不透明盒子到底是什么意思?

What exactly do they mean by single opaque box?

任何澄清都值得赞赏.谢谢！

Any clarification is much appreciated. Thanks!

推荐答案

这表示该框是一个单一的实心单元，并且不能像文本框一样将其拆分为几行，因为它的文本不能全部适合单线.请参阅第9.4.2节，其中介绍了这种拆分行为和术语内联格式设置上下文"和行框".

It means that the box is a singular, solid unit, and that it cannot be split across lines like an inline box can when its text cannot all fit on a single line. See section 9.4.2 which describes this splitting behavior and the terms "inline formatting context" and "line box".

如果行上没有任何空间可容纳原子内联框，则如果有换行的机会，整个框将换行到下一行(否则它将使行框溢出) ，即使原子内联框包含的内联内容可能部分适合当前行的剩余空间.这是因为原子内联的内联内容不参与与原子内联本身相同的内联格式化上下文中，它参与了原子内联框中 内的单独内联格式化上下文中，因此必须保留在原子内联框的边界内.

If there is no longer any space on a line to fit an atomic inline box, the entire box wraps to the next line if there is a line break opportunity (otherwise it overflows the line box), even if the atomic inline box contains inline content that would partially fit the remaining space on the current line. This is because the inline content of an atomic inline doesn't participate in the same inline formatting context as the atomic inline itself — it participates in a separate inline formatting context within the atomic inline box, and therefore must remain within the boundaries of the atomic inline box.

比较:

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

这篇关于CSS规范-原子内联水平盒的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！