什么是"Non-Replaced Inline Blocks"?



Background

级联样式表级别 2 修订版 1 (CSS 2.1) 规范,第 9 章可视化格式模型,指定:

并非所有块容器框都是块级框:未替换的

内联块和未替换的表单元格是块容器,但不是块级框。

问题

未替换的内联块在第9/10章的其他任何地方都没有提到。有人可以帮我了解这些块框代表什么元素吗?

旁注

  • 它们不是指未替换的内联元素,这是最常见的内联元素类型
  • 它们也不是指带有display:inline-block的元素,因为它们是内联级框

编辑

  • 从上面的引用可以推断,未替换的内联块是块容器盒
  • 我们也知道:

    内联级元素是源文档中那些 不形成新的内容块;内容按行分发 (例如,段落中强调的文本片段、内联图像、 等)。"display"属性的以下值构成元素 内联级别:"内联"、"内联表"和"内联块"。 内联级元素生成内联级框,即框 参与内联格式上下文。

  • 如果未替换的内联块是块容器盒,而具有display:inline-block的元素是内联级框(即不是块级框,因此不是块级框),那么从逻辑上讲,未替换的内联块不能是具有display:inline-block的元素的结果。

  • 换句话说,内联块不是来自带有display:inline-block的元素。

其他注意事项

  • 我对替换与非替换的概念感到满意,只是想在上面的第一个引号中了解规范中内联块的含义,当唯一的定义是内联块<时——请注意连字符。>

术语内联块内联块指的是同一件事(内联级的块容器盒),并且完全可以互换。实际上,具有display: inline-block的元素会生成一个内联块框或内联块框(带或不带连字符)。连字符仅存在,因此 CSS 能够inline-block定义为单个关键字值。

非连字符形式在 CSS2 的第 9 节中多次出现,但在该规范中的其他任何地方都没有出现(它在 css-display-3 中出现过一次,在一个几乎逐字从 CSS2 中移除的句子中,所以它不算在内)。我不知道为什么会这样,但非连字符形式指的是与连字符形式不同的东西并不是意图。事实上,第 9 节本身可以互换使用这两种形式 — 有关使用连字符形式的示例,请参阅第 9.2.4 节:

内联块


此值会导致元素生成内联级块容器。内联块的内部被格式化为块框,元素本身被格式化为原子内联级框。

不过,我能理解为什么读者会感到困惑。幸运的是,CSS2 规范的其余部分和大多数 CSS3 规范(我已经检查过)在使用连字符形式时都是一致的。

此外,"box"一词的存在与否不会改变"内联块"的含义。通常,规范会将其排除在外,因为它不必要地冗长;无论如何,格式结构中不是文本运行的所有内容都是一个框,而"内联块"作为名词很好地从舌头上滚下来。


如果未替换的内联块是块容器盒,而具有display:inline-block的元素是内联级框(即不是块级框,因此不是块级框),那么从逻辑上讲,未替换的内联块不能是具有display:inline-block的元素的结果。

我认为这里有一些误解。上面的引用列出了内联块作为非块级块容器盒的示例;这句话的目的是向读者传达,并非所有的块级容器都是块级盒子,也不是所有的块级盒子都是块级盒子——事实上,这两个概念是不同的,不应该混为一谈。从我对这个相关问题的回答来看:

块框和内联块

之间的唯一区别是前者是块级的,而后者是内联级的。因此,显示值分别display: blockdisplay: inline-block。由于两者都是块容器,因此其内容的格式设置方式没有区别。

因此,同样,display: inline-block确实会导致元素生成内联块(除非布局的其他部分强制将其格式化为块级或块化,这完全是一个单独的主题)。此内联块是替换还是不替换取决于元素;例如,具有display: inline-block<img>元素生成替换的内联块,而具有display: inline-block<div>元素生成未替换的内联块。

替换的内联块实际上不能形成块容器,因为它的内容是在 CSS 格式规则之外呈现的。这就是为什么规范将未替换的内联块区分为块容器的原因。真的没有比这更多的东西了。

最新更新