<display-box>
Baseline 廣泛可用 *
這些關鍵詞定義了一個元素是否生成顯示框。
語法
有效的 <display-box> 值
contents-
這些元素本身不生成特定的框。它們被它們的偽框和子框所取代。請注意，CSS Display Level 3 規範定義了
contents值應如何影響“不尋常元素”——不純粹由 CSS 框概念（例如被替換元素）渲染的元素。有關更多詳細資訊，請參閱附錄 B：display: contents 對不尋常元素的影響。由於瀏覽器中的一個錯誤，目前這會將元素從可訪問性樹中移除——螢幕閱讀器將不會檢視內部內容。有關更多詳細資訊，請參閱下面的可訪問性部分。
none-
關閉元素的顯示，使其對佈局沒有影響（文件渲染時如同該元素不存在一樣）。所有後代元素也都會關閉顯示。要使元素佔據其通常會佔據的空間，但不實際渲染任何內容，請使用
visibility屬性代替。
無障礙
目前大多數瀏覽器中的實現會將任何 display 值為 contents 的元素從可訪問性樹中移除。這將導致該元素——在某些瀏覽器版本中，其後代元素——不再被螢幕閱讀技術宣佈。根據 CSSWG 規範，這是不正確的行為。
正式語法
<display-box> =
contents |
none
示例
在第一個示例中，類名為 secret 的段落設定為 display: none；該框和任何內容現在都不會被渲染。
display: none
HTML
html
<p>Visible text</p>
<p class="secret">Invisible text</p>
CSS
css
p.secret {
display: none;
}
結果
display: contents
在此示例中，外部 <div> 具有 2 畫素的紅色邊框和 300 畫素的寬度。但是，它還指定了 display: contents，因此該 <div> 將不會被渲染，邊框和寬度將不再適用，子元素將像父元素從未存在過一樣顯示。
HTML
html
<div class="outer">
<div>Inner div.</div>
</div>
CSS
css
.outer {
border: 2px solid red;
width: 300px;
display: contents;
}
.outer > div {
border: 1px solid green;
}
結果
規範
| 規範 |
|---|
| CSS Display Module Level 3 # valdef-display-contents |
瀏覽器相容性
載入中…