30

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

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

4

1 回答 1

32

对于具有块和内联变体的任何显示类型，唯一的区别是inline-*显示类型具有内联的框（即在内联格式化上下文中），而另一种具有格式化为块级框的框，受大多数与块格式化上下文中的其他块级元素具有相同的格式化约定。块级盒子和内联盒子之间的区别在别处有深入介绍。

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

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

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

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

block
这个值使一个元素生成一个块框。

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

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

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

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

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

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

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

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

flex
这个值使一个元素生成一个块级的弹性容器盒。

inline-flex
该值使元素生成一个内联级弹性容器框。

网格布局grid模块描述如下inline-grid：

grid
此值使元素生成块级网格容器框。

inline-grid
此值使元素生成内联级网格容器框。

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

于 2014-06-19T18:21:46.637 回答