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

Question

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

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

Answer 1

对于任何具有块和内联变体的显示类型，唯一的区别是 inline-*显示类型的框内嵌放置(即在 inline formatting context 中)，而另一种将框格式化为块级框，与 block formatting context 中的其他块级元素遵循大多数相同的格式约定.块级框和内联级框之间的区别深入介绍 elsewhere .
关于盒子如何布置其内容的一切都几乎相同(当然，其细节由显示类型本身决定)；任何其他细微差别都会在规范中明确说明。据我所知，实际上没有这样的差异。
如有疑问，请首选块级显示类型。如果您发现自己在问内联级别是否合适，答案很可能是否定的。某些情况可能会阻止一个框无论如何都被格式化为内联级框，例如 absolute positioning or floating ，或者被格式化为 flex 元素或网格元素。结果是从 inline-* 的直接转换变体到其通常的块变体。即，inline-block转换为 block , inline-table至 table , inline-flex至 flex , 和 inline-grid至 grid .同样，这不会直接影响元素内容的格式，就规范而言。
每种显示类型及其内联级对应物的示例如下。

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

block
This value causes an element to generate a block box.

inline-block
This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.

请注意，“块框”是“块级块容器”的简写，块容器是可以包含块级框的东西。
你可以看到这两个值都会导致一个元素生成一个块容器框，其中它的内容将始终遵循相同的格式化规则集，但块容器框本身要么被格式化为块级，要么内联-等级。 block 之间还有一个区别和 inline-block : 内联块框总是建立一个新的块格式上下文；块框只这样做 under a set of conditions .这不适用于具有块级和内联级对应物的任何其他显示类型。
Section 17.2描述 table和 inline-table如下:

table (In HTML: TABLE)
Specifies that an element defines a block-level table: it is a rectangular block that participates in a block formatting context.

inline-table (In HTML: TABLE)
Specifies that an element defines an inline-level table: it is a rectangular block that participates in an inline formatting context).

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

flex
This value causes an element to generate a block-level flex container box.

inline-flex
This value causes an element to generate an inline-level flex container box.

和 Grid Layout module描述 grid和 inline-grid如下:

grid
This value causes an element to generate a block-level grid container box.

inline-grid
This value causes an element to generate an inline-level grid container box.

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