---
title: CSS `display` 属性是什么，你可以举几个例子说明它的使用情况？
---

`display` 属性的常用值：`none`、`block`、`inline`、`inline-block`、`flex`、`grid`、`table`、`table-row`、`table-cell`、`list-item`。

| `display` 值 | 描述 |
| :-- | :-- |
| `none` | 不显示元素(元素不再影响文档的布局)。 所有子元素也不再显示。 文档被呈现为文档树中不存在的元素。 |
| `block` | 该元素在区块方向（通常是水平方向）占用一整行。 |
| `inline` | 元素可以彼此相邻地布置在一起。 |
| `inline-block` | 类似于`inline`，但允许一些`block`属性，如设置`width`和`height`。 |
| `flex` | 作为块级的 `flex` 容器，可以使用弹性盒模型进行操作。 |
| `grid` | 表现为一个使用网格布局的块级`grid`容器。 |
| `table` | 它像`<table>`元素一样. |
| `table-row` | 它像`<tr>`元素一样. |
| `table-cell` | 它像`<td>`元素一样. |
| `list-item` | 像一个 `<li>` 元素一样，它允许它定义 `list-style-type` 和 `list-style-position` 。 |

`display` 属性的完整值列表，请参阅[CSS Display | MDN](https://developer.mozilla.org/en-US/docs/Web/CS/display)。

## 参考资料

- [CSS Display | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/display)