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 屬性
