25 lines
1.3 KiB
Plaintext
25 lines
1.3 KiB
Plaintext
---
|
|
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` 容器，可以使用 flexbox 模型进行操作。 |
|
|
| `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/zh-CN/docs/Web/CSS/display)。
|
|
|
|
## 参考资料
|
|
|
|
* [CSS Display | MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/display)
|