MDN之Web开发技术【display】

旧城等待， 2021-07-04 16:37 479阅读 0赞

为显示`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;

<table> 
 <thead> 
  <tr> 
   <th align="left">名称</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">初始值</td> 
   <td align="left">inline</td> 
  </tr> 
  <tr> 
   <td align="left">适用元素</td> 
   <td align="left">all elements</td> 
  </tr> 
  <tr> 
   <td align="left">是否是继承属性</td> 
   <td align="left">否</td> 
  </tr> 
  <tr> 
   <td align="left">适用媒体</td> 
   <td align="left">all</td> 
  </tr> 
  <tr> 
   <td align="left">计算值</td> 
   <td align="left">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.</td> 
  </tr> 
  <tr> 
   <td align="left">Animation type</td> 
   <td align="left">discrete</td> 
  </tr> 
  <tr> 
   <td align="left">正规顺序</td> 
   <td align="left">the unique non-ambiguous order defined by the formal grammar</td> 
  </tr> 
 </tbody> 
</table>

## 语法 ##

`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` 会修改其在可访问性树中的表示，这会使得表格不能被屏幕阅读技术正常处理。