显示属性差异inline- * something * [英] Display property differences for inline-*something*

问题描述

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

I noticed that people covered specifics of some display properties in a 1 on 1 comparison, but there are quite a few that have not been covered in illustrating the differences. Could someone explain the differences between the various inline-something display tags?

编辑：对像w3schools这样的地方更详细的定义会奇迹。

A more elaborated definition over places like w3schools would do wonders.

推荐答案

我确定唯一的区别，对于任何显示模式有块和内联变体， c $ c> inline - * 显示模式的方框放置inline（即在内联格式化上下文），而另一个具有格式化为块级框的框，受制于大多数与块格式化上下文。

I'm pretty sure the only difference, for any display mode that has block and inline variants, is that the inline-* display mode has the box laid inline (i.e. in an inline formatting context) while the other has the box formatted as a block-level box, subject to most of the same formatting conventions as other block-level elements in a block formatting context.

关于盒子如何布置其内容的一切都是相同的（其细节当然由显示模式本身控制）;任何其他细微差别将在规范中明确说明。但是，据我所知，没有这样的差异。

Everything concerning how the box lays out its contents is pretty much the same (the specifics of which, of course, are governed by the display mode itself); any other nuanced differences would have been stated explicitly in the spec. As far as I can tell, however, there are no such differences.

在CSS2.1中，部分9.2.4 描述块和 inline-块如下：

In CSS2.1, section 9.2.4 describes block and inline-block as follows:

阻止

此值导致元素生成块框。

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

inline-block

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

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.

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

Note that "block box" is a shorthand for "block-level block container", and a block container is something that can contain block-level boxes.

看到这两个值都会导致元素生成块容器框，其中的内容将始终遵循相同的格式规则集，但 本身格式化为块级或内联级。

You can see that both of these two values cause an element to generate a block container box, in which its contents will always follow the same set of formatting rules, but that block container box itself is either formatted as block-level, or inline-level.

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

表（在HTML中：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（在HTML中：TABLE）

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

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模块描述了 flex 和 inline-flex 如下：

flex

此值使元素生成块级Flex容器框。

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

inline-flex

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

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

网格布局模块说明了网格和 inline-grid 如下：

grid

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

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

inline- grid

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

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

在所有这些情况下，无论是块级或内联级，表，flex容器或网格容器的行为都是完全相同的。

In all of these scenarios, a table, a flex container, or a grid container will behave exactly the same way whether it is block-level or inline-level.

某些情况可能会阻止某个框格被格式化为内嵌级框，例如绝对定位或浮动。对于上面列出的所有显示模式，结果是从 inline - * 变量到其通常的块变量的直接转换。例如， inline-block 转换为 block 和 inline-flex 转换为 flex 。同样，这不会直接影响元素的内容格式，而不会影响规格。

Certain scenarios may prevent a box from ever being formatted as an inline-level box, such as absolute positioning or floating. For all of the display modes listed above, the result is a direct conversion from the inline-* variant to its usual block variant. For example, inline-block is converted to block, and inline-flex is converted to flex. Again, this does not directly affect how an element's contents are formatted, not as far as the specifications go.

这篇关于显示属性差异inline- * something *的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！