解锁 display 的 32 种写法：探索 CSS 的无限可能性

在 CSS 的世界中，display 属性扮演着至关重要的角色，它决定了元素如何在页面上呈现。然而，你是否知道 display 拥有令人惊叹的 32 种写法？今天，我们将踏上探索之旅，深入了解每一种写法的独特之处。

外部值

外部值仅影响元素自身的显示方式，不会影响其内部内容。

• display: inline ：元素表现为行内元素，与文本一起排列。
• display: block ：元素表现为块级元素，占据整行宽度。
• display: inline-block ：元素同时具有行内和块级元素的特性。
• display: none ：隐藏元素，从页面中删除。
• display: flex ：元素沿主轴（默认水平）排列，其子元素以灵活的方式排列。
• display: grid ：元素创建网格布局，允许精确控制子元素的位置和尺寸。
• display: inline-flex ：元素表现为行内元素，其内部内容沿主轴排列。

定位值

定位值改变元素在页面上的位置。

• display: absolute ：将元素从正常文档流中移除，并根据其指定的位置进行绝对定位。
• display: fixed ：将元素从正常文档流中移除，并相对于视口进行固定定位。
• display: relative ：将元素从正常文档流中移除，但其仍占据其原始位置。
• display: sticky ：将元素从正常文档流中移除，直到其达到指定位置，然后将其粘贴到视图中。

表格值

表格值用于创建表格布局。

• display: table ：将元素转换为表格。
• display: table-caption ：定义表格标题。
• display: table-cell ：定义表格单元格。
• display: table-column ：定义表格列。
• display: table-column-group ：定义表格列组。
• display: table-footer-group ：定义表格尾部组。
• display: table-header-group ：定义表格头部组。
• display: table-row ：定义表格行。
• display: table-row-group ：定义表格行组。

其他值

• display: initial ：恢复元素的默认显示值。
• display: inherit ：从父元素继承 display 值。
• display: revert ：从父元素继承的 display 值恢复为元素的默认值。
• display: unset ：将 display 值重置为其默认值。