CSS display 属性
示例
一些不同 display 值的使用
p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}
亲自试一试 »
更多“亲自试一试”示例在下方。
定义和用法
display 属性指定元素的显示行为（渲染框的类型）。
| 默认值 | inline |
|---|---|
| 继承 | 否 |
| 可动画 | 否。 阅读关于 可动画属性 的内容 |
| 版本 | CSS1 |
| JavaScript 语法 | object.style.display="none" 试一试 |
浏览器支持
表格中的数字指定了完全支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| display | 4.0 | 8.0 | 3.0 | 3.1 | 7.0 |
注意：值“flex”和“inline-flex”需要在 Safari 9 之前的版本中使用 -webkit- 前缀才能生效。
注意：“display: contents”在 Edge 79 之前的版本中不起作用。
CSS 语法
display: value;
属性值
| 值 | 描述 | 播放 |
|---|---|---|
| inline | 将元素显示为内联元素（如 <span>）。任何高度和宽度属性都不会生效。这是默认值。 | 演示 ❯ |
| block | 将元素显示为块级元素（如 <p>）。它从新行开始，并占据整个宽度。 | 演示 ❯ |
| contents | 使容器消失，并将子元素作为 DOM 中上一级元素的子元素。 | 演示 ❯ |
| flex | 将元素显示为块级弹性容器。 | 演示 ❯ |
| grid | 将元素显示为块级网格容器。 | 演示 ❯ |
| inline-block | 将元素显示为内联级块容器。元素本身格式化为内联元素，但您可以应用高度和宽度值。 | 演示 ❯ |
| inline-flex | 将元素显示为内联级弹性容器。 | 演示 ❯ |
| inline-grid | 将元素显示为内联级网格容器。 | 演示 ❯ |
| inline-table | 元素显示为内联级表格。 | 演示 ❯ |
| list-item | 使元素的行为类似于 <li> 元素。 | 演示 ❯ |
| run-in | 根据上下文将元素显示为块级或内联级。 | 演示 ❯ |
| table | 使元素的行为类似于 <table> 元素。 | 演示 ❯ |
| table-caption | 使元素的行为类似于 <caption> 元素。 | |
| table-column-group | 使元素的行为类似于 <colgroup> 元素。 | |
| table-header-group | 使元素的行为类似于 <thead> 元素。 | |
| table-footer-group | 使元素的行为类似于 <tfoot> 元素。 | |
| table-row-group | 使元素的行为类似于 <tbody> 元素。 | |
| table-cell | 使元素的行为类似于 <td> 元素。 | |
| table-column | 使元素的行为类似于 <col> 元素。 | |
| table-row | 使元素的行为类似于 <tr> 元素。 | |
| none | 元素被完全移除。 | 演示 ❯ |
| initial | 将此属性设置为其默认值。 阅读关于 initial 的内容 | |
| inherit | 从其父元素继承此属性。 阅读关于 inherit 的内容 |
更多示例
示例
如何使用 contents 属性值的演示。在以下示例中，.a 容器将消失，并将子元素 (.b) 作为 DOM 中上一级元素的子元素。
.a {
display: contents;
border: 2px solid red;
background-color: #ccc;
padding: 10px;
width: 200px;
}
.b {
border: 2px solid blue;
background-color: lightblue;
padding: 10px;
}
亲自试一试 »
相关页面
CSS 教程： CSS 显示和可见性
HTML DOM 参考： display 属性
