CSS display 属性
示例
一些不同的 display 值的使用
p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}
自己动手试一试 »
更多“自己尝试”的例子见下文。
定义和用法
display 属性规定了元素的显示行为（渲染框的类型）。
浏览器支持
表中的数字指定了完全支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| display | 4.0 | 8.0 | 3.0 | 3.1 | 7.0 |
注意： "flex" 和 "inline-flex" 值在 Safari 9 及更早版本中需要 -webkit- 前缀才能工作。
注意： "display: contents" 在 Edge 79 及更早版本中不起作用。
CSS 语法
display: 值;
属性值
| 值 | 描述 | 试一试 |
|---|---|---|
| inline | 将元素显示为内联元素（类似 <span>）。任何 height 和 width 属性都无效。这是默认值。 | 演示 ❯ |
| block | 将元素显示为块级元素（类似 <p>）。它会开始于一个新行，并占据整个宽度。 | 演示 ❯ |
| contents | 使容器消失，使子元素成为 DOM 中上一级元素的子元素。 | 演示 ❯ |
| flex | 将元素显示为块级 flex 容器。 | 演示 ❯ |
| grid | 将元素显示为块级 grid 容器。 | 演示 ❯ |
| inline-block | 将元素格式化为内联块级容器。元素本身按内联元素格式化，但你可以应用 height 和 width 值。 | 演示 ❯ |
| inline-flex | 将元素显示为内联 flex 容器。 | 演示 ❯ |
| inline-grid | 将元素显示为内联 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 Display 和 visibility
HTML DOM 参考：display 属性
