前端

CSS中的`display`属性非常关键，主责决定一个元素如何被展示在页面上。以下是几个常见的`display`属性值以及它们的作用：

1. `none`：此值使元素不显示，并从文档布局中完全移除，就好像它从未存在一样，不占据任何空间。

    **例子**：当你想隐藏一些内容，而不影响页面布局时，可以使用`display: none;`。

    ```css
    .hidden-element {
      display: none;
    }
    ```

2. `block`：它将元素显示为块级元素，这意味着元素会新起一行显示，并且尽可能占满父元素的宽度。

    **例子**：默认的`<div>`、`<p>`、`<h1>`到`<h6>`等都是块级元素。

    ```css
    .block-element {
      display: block;
    }
    ```

3. `inline`：元素不会新起一行，其宽度仅由内容决定，多个`inline`元素可以在同一行显示。

    **例子**：`<span>`、`<a>`、`<strong>`等元素默认是内联元素。

    ```css
    .inline-element {
      display: inline;
    }
    ```

4. `inline-block`：结合了`inline`和`block`的特点，让元素既可以在同一行显示，同时又可以设置宽高。

    **例子**：适用于需要在同一行显示的按钮或菜单项，而且还需要设定尺寸。

    ```css
    .menu-item {
      display: inline-block;
    }
    ```

5. `flex`：将元素设置为弹性容器，其子元素会成为弹性项目。这个值允许使用`flexbox`布局，可以提供更复杂的布局结构和对齐方式。

    **例子**：可以创建一个水平或垂直的导航栏，其中的项可以均匀地分布空间或对齐。

    ```css
    .flex-container {
      display: flex;
    }
    ```

6. `grid`：启用网格布局，其中的子元素可以放置在定义的行和列网格中。

    **例子**：当你要创建一个复杂的页面布局，例如一个有多列和明确对齐方式的仪表盘界面。

    ```css
    .grid-container {
      display: grid;
    }
    ```

7. `table`：类似于HTML的`<table>`，将元素表现为表格相关的元素，如`<table>`,`<tr>`, `<td>`等。

    **例子**：当你需要使用CSS而不是HTML标签来创建表格布局时。

    ```css
    .table-like {
      display: table;
    }
    ```

这些只是`display`属性中的几个值，实际上还有很多其他值，如`list-item`、`table-row`、`table-cell`等，它们可以用于更专门的布局需求。不同的`display`设置对布局、文档流和元素间的关系有着直接的影响。

display有哪些值？说明他们的作用？