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

Question

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

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

Answer 1

对于任何具有 block 和内联变体的显示类型，唯一的区别是 inline-* 显示类型具有内联放置的框(即在 inline formatting context 中)，而另一个具有该框被格式化为 block 级框，与 block formatting context 中的其他 block 级元素遵循大多数相同的格式约定。 . block 级框和行内级框之间的区别深入介绍了elsewhere .

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

如有疑问，首选 block 级显示类型。如果你发现自己在问 inline-level 是否合适，答案很可能是否定的。某些情况可能会阻止框被格式化为行内级框，例如 absolute positioning or floating ，或者被格式化为 flex 元素或网格元素。结果是从 inline-* 变体直接转换为其通常的 block 变体。即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 盒”是“ block 级 block 容器”的简写， block 容器是可以包含 block 级盒的东西。

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

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

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 容器或网格容器的行为方式完全相同，无论是 block 级还是内联级。 flex 容器总是为其 flex 元素建立一个 flex 格式化上下文，而网格容器总是为其网格元素建立一个网格格式化上下文。