内联-*某些属性*的显示属性差异

Question

我注意到一些人在1:1比较中涵盖了某些显示属性的具体内容，但还有很多方面没有涵盖。 有人能解释一下各种行内-something显示标记之间的区别吗？

像w3schools这样的地方提供更详细的定义将产生奇妙的效果。

- NBeers

Answer 1

任何具有块级和内联变体的显示类型，唯一的区别在于inline-*显示类型以行内方式布置盒子（即在inline formatting context中），而其他类型则将盒子格式化为块级盒子，受到与block formatting context中的其他块级元素大部分相同的格式约定的影响。块级框和内联级框之间的差异在elsewhere中详细介绍。

关于盒子如何布局其内容的所有内容都基本相同（当然，具体规定取决于显示类型本身）；任何其他微妙的差异都会在规范中明确说明。据我所知，实际上没有这样的差异。

当不确定时，优先选择块级显示类型。如果你自问是否适合使用内联级，则答案很可能是否定的。某些情况下，一个盒子永远无法被格式化为内联级盒子，比如绝对定位或浮动，或者被格式化为弹性项或网格项。结果是将inline-*变体直接转换为其通常的块变体。也就是说，inline-block被转换为block，inline-table被转换为table，inline-flex被转换为flex，inline-grid被转换为grid。再次强调，这并不直接影响元素的内容如何被格式化，至少从规范上来看是这样的。

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

---

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

block
这个值会导致元素生成一个块级框。

inline-block
这个值会导致元素生成一个内联级块容器。内联块的内部被格式化为块级框，而元素本身则被格式化为原子内联级框。

请注意，“块级框”是“块级块容器”的缩写，而块容器是可以包含块级框的东西。

您可以看到，这两个值都会导致元素生成一个块容器框，其中其内容将始终遵循相同的一组格式化规则，但该块容器框本身要么被格式化为块级，要么被格式化为内联级。

在block和inline-block之间还有一个额外的区别：内联块框总是会建立一个新的块级格式上下文；块级框只有在一组条件下才会这样做。对于其他具有块级和内联级对应物的显示类型，这并不成立。

第17.2节描述了table和inline-table如下：

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

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

Flexbox模块将flex和inline-flex描述如下：

flex
该值使元素生成块级flex容器框。

inline-flex
该值使元素生成内联级别的flex容器框。

Grid布局模块将grid和inline-grid描述如下：

grid
该值使元素生成块级grid容器框。

inline-grid
该值使元素生成内联级别的grid容器框。

同样，在所有这些情况下，无论是块级还是内联级，表格、flex容器或grid容器的行为都完全相同。flex容器始终为其flex子项建立flex格式上下文，而grid容器始终为其grid子项建立grid格式上下文。

- BoltClock

---

我所遵循的第三个链接说：inline生成inline元素，box生成盒状元素，但两者的区别并不清楚。 - Anton Chikin

邮件HTML中的inline-*怎么样？似乎Gmail使用inline-grid，而不是grid。 - deann