关于显示属性的所有细微差别

以我的经验来看，display 属性会给新手开发者带来很多疑问。说实话，我也经常遇到经验丰富的开发者对此感到困惑。

我创建了一个实时备忘单来解决这个问题。此外，我还在本文中讨论了该属性的大部分细节。

显示：块

默认行为

1.带有 display: block 属性的元素的 width 属性会按照文本方向填充所有可用空间。带有 display: block 属性的元素的 height 属性会根据内容自动计算。

如果带有 display: block 的元素的内容不适合放在一行，那么浏览器会将其移动到新行。

2.带有 dispay:block 的元素总是从新行开始。

盒子模型特点

3.可以为具有 display: block 的元素设置 width 和 height 属性。

4.填充和边框属性也可以应用。

但是使用边距时，我们会遇到意外情况，因为它们可能最终位于父级之外。

如果我们为父级设置了边框或填充属性，边距就会停止并位于其外部。

这在使用垂直填充或边框的情况下有效，但在水平填充或边框的情况下无效。

当添加仅一侧的填充或边框时，边距将停止在该侧的父级之外，但仍在另一侧。

在添加与可见值不同的溢出属性后，边距将停止并位于父级之外。

如果父级有几个项目，则第一个元素之前和最后一个元素之后的边距会超出父级。

在这种情况下，为父级添加边框、填充和溢出属性会停止此边距行为。

相邻元素的外边距设置为 display: block 时也会折叠。浏览器会选择两者中最大的一个。

填充、边框和溢出属性无法改变它。

显示：内联

默认行为

1.具有display: inline的元素的宽度和高度属性会根据内容自动计算。

如果带有 display: inline 的元素内容一行显示不下，浏览器会将其移至新行。宽度将根据最大行长计算。

2.如果 display: inline 的元素有空格，则它们会在同一行。如果没有空格，浏览器会将其中的一部分移到新的一行。

盒子模型特点

3. display: inline 的元素不能设置 width 和 height 属性。

4.您可以设置填充、边框和边距。垂直值最终会超出父级。

此外，填充、边框和边距可以与父级的填充和边框重叠。

如果具有 display: inline 的元素位于多行中，则填充、边框和边距会相互重叠。

对于多行元素，边距最终可能会位于水平方向的外侧。

如果值与可见值不同，则溢出属性会裁剪边距。

对于具有 display: inline 的元素使用 margin: auto 是没有意义的，因为它不起作用。

显示：弹性

默认行为

1.具有 display: flex 属性的元素的 width 属性会按照文本方向填充所有可用空间。 height 属性会根据内容高度自动计算。

如果元素默认具有 display: block，则在 flex 上更改块值后我们将看不到任何变化。

这些情况也发生在带有 display: inline 的元素上。width 属性在 flex 元素的 inline 值之后不再依赖于内容。

如果带有 display: flex 的元素内容无法在一行中显示，浏览器会将其移至新行。其 width 属性将等于父元素的 width 属性。

如果我们改变 flex 上的块值，那么我们将不会看到与 width 属性相同的变化。

如果我们将内联值更改为 flex，则宽度属性将根据最大行长度停止。

2.默认情况下，display: flex 的元素会定位在一列中。因此，如果我们将 block 值更改为 flex，元素将保留其位置。

如果我们将内联值改为 flex，我们就会发现它们位于一列中。

盒子模型特点

3.元素的 width 和 height 属性可以设置为 display: flex。因此，当将 block 属性的值更改为 flex 时，我们不会注意到任何变化。

将内联值更改为 flex 后，宽度和高度属性开始应用。

4.可以为具有 display: flex 的元素设置 padding 和 border 属性。如果元素默认具有 display: block 属性，则在更改 flex 元素的 block 值后，我们将看不到任何变化。

在将内联值更改为 flex 后，我们就会看到它们，因为垂直填充和边框不再位于父级之外。

margin 属性有一些特殊之处。由于使用 display: block 的元素的垂直边距可能会超出父元素，因此将 block 值更改为 flex 后，此行为会保留。

但是，与具有 display: block 的元素一样，向父级添加边框或填充属性会停止此边距行为。

如果父级元素中有几个元素的上外边距设置为 display: block ，则第一个元素的上外边距将超出父级元素，最后一个元素的下外边距将超出父级元素。将 block 值更改为 flex 并不能取消此设置。

与单个项目的情况一样，向父级添加 padding 或 border 属性也会停止具有 display: flex 的元素的这种行为。

此外，当将 block 值更改为 flex 时，相邻元素之间的边距也会继续折叠。元素之间的间隙将等于最大值。

添加填充或边框属性后，折叠将被保存。

由于具有 display: inline 的元素的垂直边距可能最终位于父级之外，因此在将 inline 值更改为 flex 后，此行为会保存。

当将内联值更改为 flex 时，边距不会与设置为父级的填充或边距重叠。

当我们将内联更改为弹性并且父级有多行元素时，顶部边距将仅对于第一个元素位于其外部，而底部边距将位于其外部。

其他元素的边距不再与兄弟元素垂直重叠。它们将被折叠。

弹性项目的默认行为

注意！弹性项目是 display: flex 或 display: inline-flex 元素的子元素

5.弹性项目始终是块状的。这意味着所有块值都会被保存。

所有内联值都会在块级值上发生变化。因此，inline 和 inline-block 的值将更改为 block，inline-flex -> flex，inline-grid -> grid，inline-table -> table。

6.弹性项目的 width 属性取决于 flex-direction 属性。如果 flex-direction: row（默认值），则 width 属性会根据内容自动计算，弹性项目的 height 属性等于其父级的 height 属性。

因此，对于具有 display: block 属性的元素，width 属性不再等于父元素的 width 属性。它是根据内容计算的。height 属性不依赖于内容，而是等于父元素的 height 属性。

对于具有 display: inline 的元素，我们将获得等于父级高度属性的高度属性。

当 flex-direction: column 时，flex 项目的 width 属性会根据文本方向填满所有可用空间，并且 height 属性会根据内容自动计算。

因此，此行为与具有 display: block 的元素的行为相同。

对于具有 display: inline 的元素，其 width 属性将变为与父元素的 width 相同。

如果弹性项目的内容一行放不下，浏览器会将其移至新行。其 width 属性将等于父元素的 width 属性。设置 flex-direction 属性的值无关紧要。

因此，具有 display: block 的元素在其父级添加 display: flex 后，其内容将显示相同。

具有 display: inline 的元素的宽度属性将停止根据最大行长度进行计算。

7.弹性项目默认位于同一行。如果空间不足，浏览器会根据其内容进行挤压。

因此，带有 display: block 的元素会停止在一列中定位。

对于具有 display: inline 的元素，唯一的变化是它们被挤压了。

另外，可以使用 flex-direction 属性更改位置。如果我们设置了列值，则弹性项目将堆叠并停止挤压。

对于具有 display: block 的元素，此行为会重复。

对于具有 display: inline 的元素，它们会停止在同一行上并显示在一列中。

弹性项目的盒子模型特征

8.可以将 width 和 height 属性设置为 flex 元素。flex-direction 的值可以随意设置。

这就是为什么我们在将具有 display: block 的元素变为弹性项目后不会看到某些变化的原因。

对于具有 display: inline 的元素，我们在向父级添加 display: flex 后就已经可以设置宽度和高度属性。

9. padding 和 border 属性也可以设置。对于使用 display: block 的元素，这些属性无需修改即可生效。

当涉及显示元素时：内联垂直填充和边框将停止位于父级之外。

具有 display: block 的元素的 padding 和 border 属性会在向父级添加 flex-direction: column 时保存其行为。

与 flex-direction: row 相比，添加 flex-direction: column 不会影响具有 display: inline 的元素的属性行为。

注意，垂直边距不会超出父级。该行为与 flex-direction 属性无关。如果我们设置 row 或 column 的值，我们将得到相同的结果。

这意味着如果我们使用带有 display: block 的元素，我们就会看到变化。

此外，这也适用于具有 display: inline 的元素。

如果父级有两个带有 display: block 的元素，则第一个元素的边距将停止在其外部，最后一个元素的边距将停止在其底部。

在这种情况下，我们使用 display: block 为相邻元素设置边距，这样它们就会停止折叠。

显示方式：网格

默认行为

1.带有 display: grid 属性的元素的 width 属性会按照文本方向填充所有可用空间。 height 属性会根据内容自动计算。

如果元素默认具有 display: block，则在网格上更改块值后我们将看不到任何变化。

它们发生在具有 display: inline 的元素上。width 属性不再依赖于网格上 inline 值之后的内容。

如果带有 display: grid 的元素内容无法在一行中显示，浏览器会将其移至新行。其 width 属性将等于父元素的 width 属性。

如果我们改变网格上的块值，那么我们将不会看到宽度属性的变化。

如果我们将内联值更改为网格，宽度属性将根据最大行长度停止。

2.默认情况下，带有 display: grid 的元素位于一列中。因此，如果我们将 block 值更改为 grid ，元素将保存其位置。

如果我们将内联值更改为网格，我们就会发现它们位于一列中。

3.元素的 width 和 height 属性可以通过 display: grid 进行设置。因此，将 block 属性的值改为 grid 属性时，我们不会察觉到任何变化。

将内联值更改为网格后，宽度和高度属性开始应用。

4.对于具有 display: grid 的元素，可以设置 padding 和 border 属性。如果元素默认具有 display: block 属性，则在 grid 上更改 block 值后，不会看到任何变化。

将内联值更改为网格后，我们就会看到它们，因为垂直填充和边框不再位于父级之外。

由于具有 display: block 的元素的垂直边距可能最终位于父级之外，因此在将 block 值更改为 grid 后，此行为将停止。

但是，与具有 display: block 的元素一样，向父级添加边框或填充属性会停止此边距行为。

与具有 display: block 的元素一样，向父级添加 overflow 属性，其值与 visible 取消边距行为不同。

如果父级元素中有几个元素的上外边距设置为 display: block ，则第一个元素的上外边距将超出父级元素，最后一个元素的下外边距将超出父级元素。将 block 值更改为 grid 并不能取消此设置。

与单个项目的情况一样，向父级添加填充、边框或溢出属性也会停止具有 display: grid 的元素的这种行为。

此外，当将 block 值更改为 grid 时，相邻元素之间的边距也会继续折叠。元素之间的间隙将等于最大值。

添加填充、边框和溢出属性后，折叠将被保存。

由于具有 display: inline 的元素的垂直边距可能最终位于父级之外，因此在将 inline 值更改为 grid 后，此行为会保存。

将内联值更改为网格时，边距不会与设置为父级的填充或边距重叠。

当我们将内联更改为网格并且父级具有多行元素时，顶部边距将仅对于第一个元素位于其外部，而底部边距将位于其外部。

其他元素的边距不再与兄弟元素垂直重叠。它们将被折叠。

另外，将内联值更改为网格引导边距后，应用溢出时会再次显示。该值应与可见值不同。

如果我们为具有 display: block 或 display: inline 的元素定义 margin: auto，则在添加 display: grid 后，该元素将不再起作用。

为元素定义 width 属性，使其具有 display: block 属性，这样就可以处理水平边距。在网格上更改 block 值后，此操作会保存。

此外，如果定义了宽度属性，则更改网格上的内联值允许使用 margin: auto。

网格项的默认行为

注意！网格项是带有 display: grid 或 display: inline-grid 的元素的子项

5.网格项始终被块化。这意味着所有块值都会被保存。

所有内联值都会在块级值上发生变化。因此，内联和内联块级值将更改为块级，内联网格级值更改为网格级，内联网格级值更改为网格级，内联表格级值更改为表格级。

6.网格项的 width 属性等于父级的 width 属性。height 属性会尝试填充所有空间。

因此，对于具有 display: block 属性的子元素，其 width 属性始终等于父元素的 width 属性。height 属性不再依赖于内容，但当父元素未定义 height 属性时，其外观与父元素相同。

在这种情况下，如果定义填充高度属性的所有空间会更加明显。

对于具有 display: inline 的子元素，我们将根据内容获取宽度属性。如果父元素未定义 height 属性，则 height 属性与之前相同。

如果高度属性被定义为父级，我们将更好地看到属性如何拉伸。

如果网格项的内容一行放不下，浏览器会将其移至新行。其 width 属性将等于父级的 width 属性。

因此，在将 display: grid 添加到其父级后，具有 display: block 的子级的内容将显示相同的内容。

带有 display: inline 的子项的宽度属性停止根据最大行长度进行计算。

默认情况下，网格项从新行开始。因此，使用 display: block 的子元素仍然会保存位置。

与带有 display: block 的 childs 的情况相反，带有 display: inline 的 childs 会改变默认位置。

网格项目的盒子模型特征

8.网格项的 width 和 height 属性可以设置。这就是为什么我们将父级的 display 属性从 block 值改为 grid 后，看不到某些变化的原因。

当考虑具有 display: inline 的子项时，我们已经可以在向父项添加 display: grid 后设置宽度和高度属性。

9. padding 和 border 属性也可以设置。对于使用 display: block 的子元素，这些属性无需修改即可生效。

当谈到带有显示的子项时：内联垂直填充和边框将停止出现在父项之外。

注意，垂直边距不会超出父级。这会导致如果将 display: block 设置为 childs ，我们会看到变化。

如果父级有两个带有 display: block 的子级，则第一个子级的边距将停止在它的外面，最后一个子级的边距将停止在它的底部。

在这种情况下，我们用 display: block 设置相邻子项的边距，这样它们就会停止折叠。

当为子元素添加 display: grid 时，具有 display: inline 的子元素的垂直边距将不再位于父元素之外。

此外，边距不再与填充和边框重叠。

当应用 margin: auto 时，子元素的 width 和 height 属性将根据父元素添加 display: grid 后的内容进行计算。子元素与父元素边框之间的所有空间将均匀分布。

我们将看到，在改变网格上的块值后，宽度属性停止等于父级的宽度属性。

在网格上更改内联值后，宽度和高度属性保持不变。

向网格项添加 margin: auto 将停止填充宽度和高度属性的所有空间。

PS 💪直接在收件箱中
获取更多有关 CSS 的免费技巧

❤ 非常感谢我的赞助商：Ben Rinehart、Jesse Willard、Tanya Ten、Konstantinos Kapenekakis。