css – 显示内联的属性差异 – * *

我注意到人们在1：1比较中涵盖了某些显示属性的细节,但是有很多未说明差异的内容.有人可以解释各种内联显示标签之间的差异吗？

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

解决方法

对于具有块和内联变体的任何显示类型,唯一的区别是内联 – *显示类型具有内嵌(即在 inline formatting context中)的框,而另一个具有格式化为块级框的框,受制于与 block formatting context中的其他块级元素大多数相同的格式约定.块级别框和内联级别框之间的差异在深度 elsewhere中介绍.

关于盒子如何布置其内容的所有内容几乎相同(当然,具体情况由显示类型本身决定);任何其他细微差别都会在规范中明确说明.据我所知,实际上没有这样的差异.

如有疑问,请选择块级显示类型.如果你发现自己在询问内联级别是否合适,那么答案可能是肯定的.某些情况可能会阻止将盒子格式化为内联级别框,例如absolute positioning or floating,或者将其格式化为弹性项目或网格项目.结果是从inline- *变体到其通常的块变体的直接转换.也就是说,内联块转换为块,内联表到表,内联 – flex到flex,以及内联网格到网格.同样,这不会直接影响元素内容的格式化,也不会影响规范的格式.

每种显示类型及其内联级别对应的示例如下.

在CSS2.1中,section 9.2.4描述了块和内联块,如下所示：

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.

请注意,“块框”是“块级块容器”的简写,块容器是可以包含块级框的东西.

您可以看到这两个值都导致元素生成块容器框,其中的内容将始终遵循相同的格式设置规则集,但该块容器框本身要么格式化为块级,要么内联 – 水平.

块和内联块之间还有一个区别：内联块框始终建立新的块格式化上下文;块框仅适用于under a set of conditions.对于具有块级和内联级对应的任何其他显示类型,这不适用.

Section 17.2描述了表和内联表,如下所示：

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
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容器或网格容器的行为都完全相同. Flex容器始终为其flex项目建立flex格式设置上下文,并且网格容器始终为其网格项目建立网格格式设置上下文.

原文地址：https://www.jb51.cc/css/215216.html