CSS的display有哪些值？

## 简介

`display` 属性是 `CSS1` 规范中引入的，该规范最早发布于 1996 年。这意味着自从 CSS 的诞生之初，`display` 属性就一直存在。在 `CSS1` 中，`display` 属性的作用是控制元素在文档中的显示方式，这对于页面布局和样式设计非常重要。

随着 `CSS` 的不断发展，`display` 属性的功能也得到了扩展，新的取值不断被添加进来，例如 `Flexbox` 和 `Grid` 布局模型的引入，使得开发者可以更加灵活地控制页面布局。到目前为止，`display` 属性仍然是 `CSS` 中的一个核心属性，被广泛应用于网页开发中。

<!-- more -->

## `dispaly`的值

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

- `none`: 元素不会被显示，并且在文档布局中不占据空间。
- `block`: 元素呈现为块级元素，会在页面中新起一行，并且可以设置宽度、高度以及其他盒模型属性。
- `inline`: 元素呈现为内联元素，不会在页面中新起一行，只会占据其内容所需的空间。
- `inline-block`: 元素呈现为内联块级元素，可以设置宽度、高度等盒模型属性，同时又像内联元素一样在同一行显示。
- `flex`: 定义一个弹性容器，其子元素将以弹性布局方式进行排列。
- `grid`: 定义一个网格容器，可以使用网格布局来排列其子元素。
- `table`: 元素呈现为表格元素，可以将其作为表格布局的一部分来使用。
- `table-cell`: 元素作为表格单元格显示。
- `table-row`: 元素作为表格行显示。
- `inline-table`: 元素作为内联表格显示。
- `list-item`: 元素作为列表项显示，常用于 `<li>` 元素。
- `inherit`: 继承父元素的 display 属性值。

### 最常用的值

- `block`: 将元素呈现为块级元素，会在页面中新起一行，并且可以设置宽度、高度以及其他盒模型属性。常见的默认块级元素包括 `<div>`、`<p>`、`<h1>` 等。
- `inline`: 将元素呈现为内联元素，不会在页面中新起一行，只会占据其内容所需的空间。常见的默认内联元素包括 `<span>`、`<a>`、`<strong>` 等。
- `inline-block`: 将元素呈现为内联块级元素，可以设置宽度、高度等盒模型属性，同时又像内联元素一样在同一行显示。常用于创建水平排列的块级元素。
- `flex`: 定义一个弹性容器，其子元素将以弹性布局方式进行排列。可以使用一系列属性来控制子元素的布局，例如 `justify-content`、`align-items` 等。
- `grid`: 定义一个网格容器，可以使用网格布局来排列其子元素。通过设置网格列和行，可以灵活地控制子元素的布局。

## 赞助请求V3

**建站因为热爱，生活需要Money，请屏幕前的大佬动动您发财的小手，点击一次以示鼓励，祝您生活愉快！**

<!-- 文章内嵌广告位 -->
<div class="article-ads"></div>

> PS：就目前的访问量，即便每个访客都点一次广告，收入也不足以支付运营成本。`如果看不到广告，可能是网络原因或被拦截了，那就算了吧。再次祝您生活愉快~~`