display 是 CSS 中用于定义元素生成框的外观及行为的属性。它决定了元素的布局模型，如何在页面中占据空间，以及元素之间的相互关系。

以下是一些常见的 display 属性值：

1. block: 元素会生成一个块级元素框，独占一行，并且垂直方向上堆叠。常见的块级元素包括 <div>、<p> 等。
    .block-element {
      display: block;
    }

2. inline: 元素生成一个行内元素框，不会独占一行，相邻的行内元素会在同一行显示。常见的行内元素包括 <span>、<a> 等。
    .inline-element {
      display: inline;
    }

3. inline-block: 元素表现为内联元素，但其内容会生成一个块级元素框，因此可以设置宽高等块级元素的属性。
    .inline-block-element {
      display: inline-block;
    }

4. none: 元素会被完全从页面中删除，不占据空间。
    .hidden-element {
      display: none;
    }

5. flex: 定义一个弹性容器，其子元素可以通过 flex 属性进行布局。
    .flex-container {
      display: flex;
    }

6. grid: 定义一个网格容器，用于进行二维布局。
    .grid-container {
      display: grid;
    }

7. table**、**table-row**、**table-cell: 将元素表现为表格、表格行、表格单元格，分别模拟表格结构。
    .table-element {
      display: table;
    }

    .table-row-element {
      display: table-row;
    }

    .table-cell-element {
      display: table-cell;
    }

这只是 display 属性的一小部分，它的值有很多，用于控制元素的外观和布局。选择正确的 display 属性值对于实现所需的页面布局和结构非常重要。


转载请注明出处：http://www.zyzy.cn/article/detail/4177/CSS