显示 inline-*something* 的属性差异

Question

我注意到人们在 1:1 比较中涵盖了某些显示属性的细节，但在说明差异时还没有涵盖很多内容。有人能解释一下各种 inline-something 显示标签之间的区别吗？

对像 w3schools 这样的地方进行更详细的定义会产生奇迹。

Answer 1

对于任何具有块和内联变体的显示类型，唯一的区别是inline-* 显示类型具有内嵌的框（即在inline formatting context 中），而另一种具有格式化为块的框-级别框，遵循与block formatting context 中的其他块级元素大部分相同的格式约定。块级框和行内级框的区别在elsewhere有深入介绍。

关于盒子如何布置其内容的一切都几乎相同（当然，具体细节由显示类型本身决定）；任何其他细微差别都将在规范中明确说明。据我所知，实际上并没有这样的差异。

如有疑问，请首选块级显示类型。如果您发现自己询问内联级别是否合适，那么答案很可能是否定的。某些场景可能会阻止盒子被格式化为内联级盒子，例如absolute positioning or floating，或者被格式化为弹性项目或网格项目。结果是从inline-* 变体直接转换为其通常的块变体。也就是说，inline-block 转换为 block，inline-table 转换为 table，inline-flex 转换为 flex，inline-grid 转换为 grid。同样，这不会直接影响元素的 内容 的格式，就规范而言。

每种显示类型及其内联级对应物的示例如下。

---

在 CSS2.1 中，section 9.2.4 描述 block 和 inline-block 如下：

屏蔽
此值会导致元素生成块框。

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

注意“块盒”是“块级块容器”的简写，块容器是可以包含块级盒的东西。

你可以看到这两个值都会导致一个元素生成一个块容器框，它的内容将始终遵循相同的格式化规则集，但是那 em> 块容器框本身被格式化为块级或内联级。

block 和inline-block 之间还有一个区别：内联块框总是建立一个新的块格式化上下文；块框只这样做under a set of conditions。这不适用于具有块级和内联级对应项的任何其他显示类型。

Section 17.2 描述table 和inline-table 如下：

表格（HTML：表格）
指定一个元素定义一个块级表：它是一个参与块格式化上下文的矩形块。

内联表（在 HTML 中：TABLE）
指定一个元素定义一个内联级表：它是一个参与内联格式化上下文的矩形块。

Flexbox module 描述flex 和inline-flex 如下：

弹性
该值会导致元素生成块级弹性容器框。

内联灵活
该值会导致元素生成内联级弹性容器框。

而Grid Layout module 描述grid 和inline-grid 如下：

网格
该值会导致元素生成块级网格容器框。

内联网格
该值会导致元素生成内联网格容器框。

同样，在所有这些场景中，表格、弹性容器或网格容器无论是块级还是内联级的行为方式都完全相同。一个弹性容器总是为其弹性项目建立一个弹性格式化上下文，而一个网格容器总是为其网格项目建立一个网格格式化上下文。