我注意到人们在 1:1 比较中涵盖了一些显示属性的细节,但在说明差异时还没有涵盖相当多的内容。有人可以解释各种内联显示标签之间的区别吗?
对像 w3schools 这样的地方进行更详细的定义会产生奇迹。
最佳答案
对于任何具有 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 格式化上下文,而网格容器总是为其网格元素建立一个网格格式化上下文。
关于css - inline-*something* 的显示属性差异,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24313271/