CSS规范-原子内联级别框

CSS规范-原子内联级别框,css,specifications,Css,Specifications,我正试着将我的大脑围绕在CSS的一些更精细的点上,我发现这部分摘录自特别迟钝的: 非内联框的内联级别框(如替换的内联级别元素、内联块元素和内联表元素)称为原子内联级别框,因为它们作为单个不透明框参与其内联格式上下文 他们所说的单一不透明框到底是什么意思 如有任何澄清,我们将不胜感激。谢谢 这意味着该框是一个单一的实体单元,当其文本不能全部放在一行中时,它不能像内联框那样跨行拆分。请参阅描述此拆分行为的内容以及术语“内联格式上下文”和“行框” 如果一行上不再有任何空间可容纳原子内联框,则如果有换行

我正试着将我的大脑围绕在CSS的一些更精细的点上,我发现这部分摘录自特别迟钝的:

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

他们所说的单一不透明框到底是什么意思


如有任何澄清,我们将不胜感激。谢谢

这意味着该框是一个单一的实体单元,当其文本不能全部放在一行中时,它不能像内联框那样跨行拆分。请参阅描述此拆分行为的内容以及术语“内联格式上下文”和“行框”

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

比较:

p{
宽度:5em;
背景色:#f0;
}
跨度{
背景色:#D0;
}
.内联块{
显示:内联块;
宽度:4.5em;
}
文本内联文本更多文本

text inline block more text
要理解此概念,您需要从链接到的同一规范点获得一些附加上下文,即:

内联框是一个内联级别的框,其内容是 参与其包含的内联格式上下文

之后你方报价如下

这意味着内联框也将内联呈现其内容,例如,请参见以下内容:


此处的示例占位符文本
谢谢!!我已经花了将近三天的时间来思考这个问题,你在几段话中把它说得非常清楚。我很惊讶没有更多关于这个的报道。除了规范之外,我只找到了一些博客文章,这些文章并没有很好地解释它。现在我理解了它,我对它的简单程度感到惊讶。@Justin Foss:是的,不幸的是,没有太多的资源来理解CSS更复杂的方面。但这就是我进来的地方:)谢谢!我已经挂断了这部分的规格有一段时间了。那么,他们是否使用不透明和原子这两个术语来描述同一事物?我明白为什么术语“原子”会适用,因为在内联格式上下文中,原子内联级别框可以被认为是不可分割的,但我不完全清楚在这个上下文中使用的术语“不透明”。这是因为,在内联格式上下文中,原子内联级元素不能被深入研究(这本质上是说它不能被分解为组成部分的另一种方式)?@Justin Foss:我认为这个答案更能解释“不透明”这个术语。原子内联的内容参与由原子内联建立的格式化上下文-它们永远不会影响原子内联外部和周围元素的布局。