CSS display 属性
实例
使用一些不同的 display 值:
p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display:
block;}
p.ex4 {display: inline-block;}
亲自试一试 »
下面有更多实例。
定义和用法
display 属性指定元素的显示行为（渲染框的类型）。
在HTML中，默认显示属性值取自HTML规范或浏览器/用户默认样式表。XML中的默认值是内联的，包括SVG元素。
浏览器支持
表中的数字表示支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| display | 4.0 | 8.0 | 3.0 | 3.1 | 7.0 |
注释: 值 "flex" 和 "inline-flex" 需要-webkit-前缀才能在Safari中工作。
注释: "display: contents" 在 Edge version 79 前不起作用。
语法
display: value;
属性值
| 值 | 描述 | 试一试 |
|---|---|---|
| inline | 默认。此元素会被显示为内联元素（如 <span> ），元素前后没有换行符。 | 亲自试一试 » |
| block | 此元素将显示为块级元素（如 <p> ），此元素前后会带有换行符。 | 亲自试一试 » |
| contents | 使容器消失，使元素的子元素在DOM中处于上一级 | 亲自试一试 » |
| flex | 将元素显示为块级 flex 容器 | 亲自试一试 » |
| grid | 将元素显示为块级网格容器 | 亲自试一试 » |
| inline-block | 行内块元素。（CSS2.1 新增的值） | 亲自试一试 » |
| inline-flex | 将元素显示为内联级别的flex容器 | 亲自试一试 » |
| inline-grid | 将元素显示为内嵌级别的网格容器 | 亲自试一试 » |
| inline-table | 让元素像 <table> 元素一样工作 | 亲自试一试 » |
| list-item | 此元素会作为列表显示。 | 亲自试一试 » |
| 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> 和 <th>） | 亲自试一试 » |
| 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 and visibility
HTML DOM 参考手册: display 属性
