display有哪些值#

display属性决定了元素如何在文档流中显示，以及它与其他元素的关系。不同的display值会影响到元素的大小、位置以及其他布局特性。掌握display的不同值及其含义，对于创建复杂且响应式的布局至关重要。

1. block#

将元素显示为块级元素。块级元素默认占据一行，并且宽度默认为100%，除非设置了具体的宽度值

2. inline#

将元素显示为行内元素。行内元素不会独占一行，它们与其他行内元素并排显示，并且默认宽度就是它们的内容宽度

3. inline-block#

将元素显示为行内块元素。行内块元素的行为介于块级元素和行内元素之间，它们可以并排显示，但又可以设置宽度和高度

4. flex#

将元素显示为弹性盒子容器。弹性盒子模型提供了一种有效的方式来排列、对齐和分配空间给子元素，即使它们的尺寸未知或是动态的

5. grid#

将元素显示为网格容器。网格布局允许你创建复杂的二维布局，它结合了行和列，使得元素可以跨越多个单元格

6. Table、table-row、table-cell、table-caption#

这些值用于模拟HTML表格的行为。它们可以创建类似于HTML <table>, <tr>, <td> 和 <caption> 元素的效果

7. none#

将元素隐藏，使其不显示在页面上，并且不占用任何空间

8. contents#

将元素当作其内容来渲染，即忽略元素本身作为一个容器的角色，直接渲染其内容。这通常用于一些特殊的场景，比如去除某些标签的默认行为