时间戳

首页 > 解决方案 > 什么是“不可替换的内联块”？

html - 什么是“不可替换的内联块”？

问题描述

背景

Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification，第9 章视觉格式化模型，指定：

并不是所有的块容器盒子都是块级盒子：非替换的内联块和非替换的表格单元格是块容器，但不是块级盒子。

问题

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

旁注

编辑

其他注释

标签： htmlcssw3c

解决方案

术语inline block和inline-block指的是同一个东西（一个 inline 级别的块容器框）并且是完全可以互换的。一个带有 的元素display: inline-block确实会生成一个内联块框或内联块框（带有或不带有连字符）。只有连字符存在，因此 CSS 能够定义inline-block为单个关键字值。

非连字符形式在 CSS2 的第 9 节中出现了多次，但在该规范的其他任何地方都没有出现（它在 css-display-3 中出现过一次，在一个句子中几乎逐字逐句地从 CSS2 中提升，所以它不算数）。我不知道为什么会这样，但非连字符形式不是指与连字符形式不同的东西。事实上，第 9 节本身可以互换使用这两种形式——请参阅第 9.2.4 节以获取使用连字符形式的示例：

inline-block
此值使元素生成内联级块容器。内联块的内部被格式化为块框，元素本身被格式化为原子内联级框。

不过，我明白为什么读者会感到困惑。幸运的是，CSS2 规范的其余部分和大多数 CSS3 规范（我已经检查过）在使用连字符形式方面都是一致的。

此外，“box”这个词的存在与否不会改变“inline-block”的含义。通常，规范将其省略，因为它不必要地冗长。格式化结构中不是文本运行的所有内容无论如何都是一个框，并且作为名词的“内联块”很好地从舌头上滚下来。

如果未替换的内联块是块容器盒display:inline-block，并且带有内联盒的元素（即不是块级盒，因此不是块容器盒），那么从逻辑上讲，未替换的内联块不能是元素的结果与display:inline-block.

我认为这里有一些误解。上面的引用列出了 inline-blocks 作为非块级的块容器框的示例；该引用的目的是向读者传达并非所有的块容器都是块级盒子，也不是所有的块级盒子都是块容器——事实上，这两个概念是不同的，不应该混为一谈。从我对这个相关问题的回答：

块盒和内联块之间的唯一区别是前者是块级的，而后者是内联级的。因此显示值display: block和display: inline-block分别。由于两者都是块容器，因此它们的内容的格式没有区别。

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

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

推荐阅读