爲顯示CSS屬性設置是否將元素視爲塊或內聯元素以及用於其子元素的佈局，例如grid或flex。
display CSS 屬性指定了元素的顯示類型，它包含兩類基礎特徵，用於指定元素怎樣生成盒模型——外部顯示類型定義了元素怎樣參與流式佈局的處理，內部顯示類型定義了元素內子元素的佈局方式。
display 的一些取值已經在其單獨的規範中給出了完整的定義；在文末的表格中可以找到所有規範的鏈接。全部的取值如下：
/* <display-outside> values */
display: block;
display: inline;
display: run-in;
/* <display-inside> values */
display: flow;
display: flow-root;
display: table;
display: flex;
display: grid;
display: ruby;
/* <display-outside> plus <display-inside> values */
display: block flow;
display: inline table;
display: flex run-in;
/* <display-listitem> values */
display: list-item;
display: list-item block;
display: list-item inline;
display: list-item flow;
display: list-item flow-root;
display: list-item block flow;
display: list-item block flow-root;
display: flow list-item block;
/* <display-internal> values */
display: table-row-group;
display: table-header-group;
display: table-footer-group;
display: table-row;
display: table-cell;
display: table-column-group;
display: table-column;
display: table-caption;
display: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container;
/* <display-box> values */
display: contents;
display: none;
/* <display-legacy> values */
display: inline-block;
display: inline-table;
display: inline-flex;
display: inline-grid;
/* Global values */
display: inherit;
display: initial;
display: unset;
| 名稱 | 說明 |
|---|---|
| 初始值 | inline |
| 適用元素 | all elements |
| 是否是繼承屬性 | 否 |
| 適用媒體 | all |
| 計算值 | as the specified value, except for positioned and floating elements and the root element. In both cases the computed value may be a keyword other than the one specified. |
| Animation type | discrete |
| 正規順序 | the unique non-ambiguous order defined by the formal grammar |
語法
display 屬性使用關鍵字取值來指定. 關鍵字取值被分爲六類:
<display-outside>
這些關鍵字指定了元素的外部顯示類型，實際上就是其在流式佈局中的角色。
<display-inside>
這些關鍵字指定了元素的內部顯示類型，它們定義了元素內部內容的格式化上下文的類型（假設是不可替換的元素）。
<display-listitem>
將這個元素的外部顯示類型變爲 block 盒，並將內部顯示類型變爲多個 list-item inline 盒。
<display-internal>
像 table 和 ruby 這樣的佈局模型有着複雜的內部結構，因此它們的孩子和後面的元素可能具有多個角色。這一類關鍵字就是用來定義這些“內部”顯示類型，並且只有在這些特定的佈局模型中才有意義。
<display-box>
這些值定義元素是否完全生成顯示盒。
<display-legacy>
CSS 2 對於 display 屬性使用單關鍵字語法, 對於相同佈局模式的 block 級和 inline 級變體需要使用單獨的關鍵字。
<display-xul> 已廢棄 Gecko 62
只有 Firefox 使用，主要用於 XUL 文檔 的樣式.
display 的“遺留”取值
Level 3 規範詳細說明了 display 屬性的兩類取值——顯式地指定了外部和內部顯示屬性的規範——但是還沒有被瀏覽器廣泛支持。
display-legacy 方法允許使用單個關鍵字達到相同效果，在雙關鍵字取值被廣泛支持之前，應該被開發者廣泛採用。舉例來說，你可以這樣用兩個關鍵字指定 inline flex 容器：
.container {
display: inline flex;
}
現在也可以用一個關鍵字來指定。
.container {
display: inline-flex;
}
正式語
[ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>
where
<display-outside> = block | inline | run-in
<display-inside> = flow | flow-root | table | flex | grid | ruby
<display-listitem> = <display-outside>? && [ flow | flow-root ]? && list-item
<display-internal> = table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby-base | ruby-text | ruby-base-container | ruby-text-container
<display-box> = contents | none
<display-legacy> = inline-block | inline-list-item | inline-table | inline-flex | inline-grid
可訪問性相關
display: none;
將 display 設置爲 none 會將元素從可訪問性樹中移除。這會導致該元素及其後續元素不再被屏幕閱讀技術訪問。
如果你只是想從視覺上隱藏這個元素，對可訪問性更加友好的做法是使用屬性組合來將其從屏幕上隱藏，但仍可以被屏幕閱讀器等輔助技術解析。
display: contents;
瀏覽器會將所有將 display 設置爲 contents 的元素從可訪問性樹中移除。這會導致該元素及其後續元素不再被屏幕閱讀技術訪問。
Tables
將 <table> 元素的 display 值修改爲 block, grid 或 flex 會修改其在可訪問性樹中的表示，這會使得表格不能被屏幕閱讀技術正常處理。