display
Baseline 廣泛可用 *
display 這個 CSS 屬性用於設定元素是否被視為塊級或行內盒子以及用於其子元素的佈局，例如流式佈局、網格或 flex。
從形式上來說，display 屬性設定了元素的內部和外部顯示型別。外部型別設定了元素在流式佈局中的角色；內部型別設定了其子元素的佈局。display 的某些值在其各自的規範中有完整的定義；例如，宣告 display: flex 時會發生什麼的細節，在 CSS 彈性盒子模型規範中被定義。
試一試
display: block;
display: inline-block;
display: none;
display: flex;
display: grid;
<p>
Apply different <code>display</code> values on the dashed orange-bordered
<code>div</code>, which contains three child elements.
</p>
<section class="default-example" id="default-example">
<div class="example-container">
Some text A.
<div id="example-element">
<div class="child">Child 1</div>
<div class="child">Child 2</div>
<div class="child">Child 3</div>
</div>
Some text B.
</div>
</section>
.example-container {
width: 100%;
height: 100%;
}
code {
background: #88888888;
}
#example-element {
border: 3px dashed orange;
}
.child {
display: inline-block;
padding: 0.5em 1em;
background-color: #ccccff;
border: 1px solid #ababab;
color: black;
}
語法
/* precomposed values */
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;
/* Box suppression */
display: none;
display: contents;
/* multi-keyword syntax */
display: block flex;
display: block flow;
display: block flow-root;
display: block grid;
display: inline flex;
display: inline flow;
display: inline flow-root;
display: inline grid;
/* other values */
display: table;
display: table-row; /* all table elements have an equivalent CSS display value */
display: list-item;
/* Global values */
display: inherit;
display: initial;
display: revert;
display: revert-layer;
display: unset;
CSS 的 display 屬性透過關鍵字值來指定。
值的組合
關鍵字值可以分為六個值類別。
外部（Outside）
<display-outside>-
這些關鍵字指定了元素的外部顯示型別，這基本上是它在流式佈局中的角色。
備註：當支援多關鍵字語法的瀏覽器遇到一個只有外部值的 display 屬性時（例如，display: block 或 display: inline），其內部值將被設定為 flow（例如，display: block flow 和 display: inline flow）。
備註：為確保佈局能在舊版瀏覽器上工作，你可以使用單值語法，例如 display: inline flex 可以有以下回退方案：
.container {
display: inline-flex;
display: inline flex;
}
更多資訊請參閱使用 CSS display 的多關鍵字語法。
內部（Inside）
<display-inside>-
這些關鍵字指定了元素的內部顯示型別，這定義了其內容所處的格式化上下文的型別（假設它是一個非替換元素）。當這些關鍵字中的任何一個作為單個值使用時，元素的外部顯示型別預設為
block（ruby除外，它預設為inline）。flow-
元素使用流式佈局（塊級和行內佈局）來排布其內容。
如果其外部顯示型別是
inline，並且它參與塊級或行內格式化上下文，那麼它會生成一個行內盒子。否則，它會生成一個塊級盒子。根據其他屬性的值（如
position、float或overflow）以及它本身是否參與塊級或行內格式化上下文，它要麼為其內容建立一個新的塊格式化上下文（BFC），要麼將其內容整合到其父格式化上下文中。 flow-root-
元素會生成一個塊級盒子，並建立一個新的塊格式化上下文，定義了格式化根所在的位置。
table-
這些元素的行為類似於 HTML
<table>元素。它定義了一個塊級盒子。 flex-
元素的行為類似於一個塊級元素，並根據 flexbox 模型來佈局其內容。
grid-
元素的行為類似於一個塊級元素，並根據網格模型來佈局其內容。
ruby-
元素的行為類似於一個行內級元素，並根據 ruby 格式化模型來佈局其內容。它的行為類似於相應的 HTML
<ruby>元素。
備註：當支援多關鍵字語法的瀏覽器遇到一個只有內部值的 display 屬性時（例如，display: flex 或 display: grid），其外部值將被設定為 block（例如，display: block flex 和 display: block grid）。
列表項（List Item）
<display-listitem>-
元素為其內容生成一個塊級盒子，並另外生成一個列表項行內盒子。
單個值 list-item 會使元素的行為類似於一個列表項。它可以與 list-style-type 和 list-style-position 一起使用。
list-item 也可以與任何 <display-outside> 關鍵字以及 flow 或 flow-root <display-inside> 關鍵字結合使用。
備註：在支援多關鍵字語法的瀏覽器中，如果沒有指定內部值，它將預設為 flow。如果沒有指定外部值，主盒子將具有 block 的外部顯示型別。
內部專用（Internal）
<display-internal>-
一些佈局模型，如
table和ruby，具有複雜的內部結構，其子元素和後代元素可以扮演多種不同的角色。本節定義了那些“內部專用”的顯示值，它們僅在該特定佈局模式下有意義。table-row-group-
這些元素的行為類似於
<tbody>HTML 元素。 table-header-group-
這些元素的行為類似於
<thead>HTML 元素。 -
這些元素的行為類似於
<tfoot>HTML 元素。 table-row-
這些元素的行為類似於
<tr>HTML 元素。 table-cell-
這些元素的行為類似於
<td>HTML 元素。 table-column-group-
這些元素的行為類似於
<colgroup>HTML 元素。 table-column-
這些元素的行為類似於
<col>HTML 元素。 table-caption-
這些元素的行為類似於
<caption>HTML 元素。 ruby-base-
這些元素的行為類似於
<rb>HTML 元素。 ruby-text-
這些元素的行為類似於
<rt>HTML 元素。 ruby-base-container-
這些元素作為匿名盒子生成。
ruby-text-container-
這些元素的行為類似於
<rtc>HTML 元素。
盒子（Box）
<display-box>-
這些值定義了一個元素是否會生成顯示盒子。
contents-
這些元素本身不產生特定的盒子。它們被其偽盒子和子盒子所替換。請注意，CSS Display Level 3 規範定義了
contents值應如何影響“不尋常元素”——即那些不純粹由 CSS 盒子概念渲染的元素，如替換元素。更多細節請參見附錄 B：display: contents 對不尋常元素的影響。 none-
關閉元素的顯示，使其對佈局沒有影響（文件的渲染效果就好像該元素不存在一樣）。所有後代元素的顯示也會被關閉。如果想讓一個元素佔據其通常會佔用的空間，但實際上不渲染任何東西，請改用
visibility屬性。
預設值（Precomposed）
<display-legacy>-
CSS 2 為
display屬性使用了一種單關鍵字、預設的語法，對同一佈局模式的塊級和行內級變體需要使用不同的關鍵字。inline-block-
元素會生成一個塊級盒子，它會與周圍內容一起流動，就好像它是一個單獨的行內盒子一樣（其行為很像一個替換元素）。
它等同於
inline flow-root。 inline-table-
inline-table值在 HTML 中沒有直接的對映。它的行為類似於一個 HTML<table>元素，但它是一個行內盒子，而不是一個塊級盒子。在表格盒子內部是一個塊級上下文。它等同於
inline table。 inline-flex-
元素的行為類似於一個行內級元素，並根據 flexbox 模型來佈局其內容。
它等同於
inline flex。 inline-grid-
元素的行為類似於一個行內級元素，並根據網格模型來佈局其內容。
它等同於
inline grid。
你應該使用哪種語法？
CSS display 模組描述了一種多關鍵字語法，你可以用它來為 display 屬性明確定義外部和內部顯示型別。為了向後相容，也支援單關鍵字值（預設的 <display-legacy> 值）。
例如，你可以使用兩個值來指定一個行內 flex 容器，如下所示：
.container {
display: inline flex;
}
這也可以使用舊的單值來指定：
.container {
display: inline-flex;
}
有關這些更改的更多資訊，請參閱使用 CSS display 的多關鍵字語法指南。
描述
display 可以設定的不同型別值的各個頁面都包含這些值的多個例項——請參閱語法部分。此外，還可以參閱以下材料，其中深入介紹了 display 的各種值。
多關鍵字值
CSS 流式佈局 (display: block, display: inline)
display: flex
display: grid
display 動畫
支援的瀏覽器使用離散動畫型別為 display 設定動畫。這通常意味著該屬性將在兩個值之間動畫進行到 50% 時發生切換。
有一個例外情況，即當動畫目標是 display: none 或從 display: none 開始時。在這種情況下，瀏覽器將切換這兩個值，以使動畫內容在整個動畫持續時間內都可見。例如：
- 當
display從none動畫到block（或其他可見的display值）時，該值將在動畫持續時間的0%處切換到block，使其在整個過程中可見。 - 當
display從block（或其他可見的display值）動畫到none時，該值將在動畫持續時間的100%處切換到none，使其在整個過程中可見。
這種行為對於建立進入/退出動畫非常有用，例如，你想用 display: none 從 DOM 中移除一個容器，但希望它透過 opacity 淡出，而不是立即消失。
當使用 CSS 動畫為 display 新增動畫時，你需要在顯式的關鍵幀中提供起始的 display 值（例如使用 0% 或 from）。請參閱使用 CSS 動畫以獲取示例。
當使用 CSS 過渡為 display 新增動畫時，還需要兩個額外的特性：
@starting-style為你想要在動畫元素首次顯示時進行過渡的屬性提供起始值。這是為了避免意外行為。預設情況下，CSS 過渡不會在元素的首次樣式更新或display型別從none變為其他型別時觸發。- 需要在
transition-property宣告（或transition簡寫）上設定transition-behavior: allow-discrete，以啟用display的過渡。
關於 display 屬性過渡的示例，請參閱 @starting-style 和 transition-behavior 頁面。
無障礙
display: none
在元素上使用 display 值為 none 將會把它從無障礙樹中移除。這將導致該元素及其所有後代元素不再被螢幕閱讀技術播報。
如果你想在視覺上隱藏元素，一個更具可訪問性的替代方法是使用屬性組合，在視覺上將其從螢幕上移除，但仍然讓螢幕閱讀器等輔助技術可以訪問它。
雖然 display: none 會從無障礙樹中隱藏內容，但被可見元素的 aria-describedby 或 aria-labelledby 屬性引用的隱藏元素仍會暴露給輔助技術。
display: contents
在某些瀏覽器中，當前的實現會將任何 display 值為 contents 的元素從無障礙樹中移除（但其後代會保留）。這將導致該元素本身不再被螢幕閱讀技術播報。根據 CSS 規範，這是不正確的行為。
表格
在某些瀏覽器中，將 <table> 元素的 display 值更改為 block、grid 或 flex 會改變其在無障礙樹中的表示方式。這將導致表格不再被螢幕閱讀技術正確播報。
正式定義
正式語法
display =
[ <display-outside> || <display-inside> ] |
<display-listitem> |
<display-internal> |
<display-box> |
<display-legacy> |
<display-outside> || [ <display-inside> | math ]
<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-table |
inline-flex |
inline-grid
示例
display 值比較
在這個例子中，我們有兩個塊級容器元素，每個容器都有三個行內子元素。下面有一個下拉選單，可以讓你為容器應用不同的 display 值，以便比較和對比不同值如何影響元素的佈局及其子元素的佈局。
我們為容器及其子元素添加了 padding 和 background-color，以便更容易地看到 display 值的效果。
HTML
<article class="container">
<span>First</span>
<span>Second</span>
<span>Third</span>
</article>
<article class="container">
<span>First</span>
<span>Second</span>
<span>Third</span>
</article>
<div>
<label for="display">Choose a display value:</label>
<select id="display">
<option selected>block</option>
<option>block flow</option>
<option>inline</option>
<option>inline flow</option>
<option>flow</option>
<option>flow-root</option>
<option>block flow-root</option>
<option>table</option>
<option>block table</option>
<option>flex</option>
<option>block flex</option>
<option>grid</option>
<option>block grid</option>
<option>list-item</option>
<option>block flow list-item</option>
<option>inline flow list-item</option>
<option>block flow-root list-item</option>
<option>inline flow-root list-item</option>
<option>contents</option>
<option>none</option>
<option>inline-block</option>
<option>inline flow-root</option>
<option>inline-table</option>
<option>inline table</option>
<option>inline-flex</option>
<option>inline flex</option>
<option>inline-grid</option>
<option>inline grid</option>
</select>
</div>
CSS
html {
font-family: "Helvetica", "Arial", sans-serif;
letter-spacing: 1px;
padding-top: 10px;
}
article {
background-color: red;
}
article span {
background-color: black;
color: white;
margin: 1px;
}
article,
span {
padding: 10px;
border-radius: 7px;
}
article,
div {
margin: 20px;
}
JavaScript
const articles = document.querySelectorAll(".container");
const select = document.querySelector("select");
function updateDisplay() {
articles.forEach((article) => {
article.style.display = select.value;
});
}
select.addEventListener("change", updateDisplay);
updateDisplay();
結果
請注意，為了說明，添加了一些多關鍵字值，它們具有以下等效值：
block=block flowinline=inline flowflow=block flowflow-root=block flow-roottable=block tableflex=block flexgrid=block gridlist-item=block flow list-iteminline-block=inline flow-rootinline-table=inline tableinline-flex=inline flexinline-grid=inline grid
你可以在值的組合下的各個 display 型別頁面中找到更多示例。
規範
| 規範 |
|---|
| CSS Display Module Level 3 # the-display-properties |
| Scalable Vector Graphics (SVG) 2 # VisibilityControl |
瀏覽器相容性
載入中…