显示 | display (Flexible Box Layout) - CSS 中文开发手册
该displayCSS属性指定用于渲染元素框的类型。在HTML中，display值，取自用户在HTML中设定的值或来自浏览器/用户默认值。XML中的默认值是inline。
none允许您关闭元素的显示；当您使用none，所有子元素的显示也会被关闭。文档被呈现为不存在。
/* <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: subgrid; /* <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 |
|---|---|
| 适用于 | 所有元素 |
| 遗传 | 没有 |
| 媒体 | 所有 |
| 计算值 | 作为指定的值，除了定位和浮动元素和根元素。在这两种情况下，计算出的值都可能是指定的关键字以外的关键字。 |
| 动画类型 | 离散的 |
| 规范的顺序 | 形式语法定义的独特的非模糊顺序 |
语法
display属性是使用关键字值指定的。关键字值分为六类：
<display-outside><display-inside><display-listitem><display-internal><display-box><display-legacy>
最好使用单个关键字来指定display; 尽管最新的CSS标准允许你组合一些关键字，但浏览器还不能很好地支持。
值
<display-outside>关键字指定元素的外部显示类型，这是它在流布局中的形态。它们被定义如下：
| 值 | Description |
|---|---|
| 块 | 该元素生成一个块元素框。 |
| inline | 元素生成一个或多个内联元素框。 |
| run-in | 该元素生成一个运行框。磨合元素的行为像内联或块，取决于周围的元素。即：如果运行框包含一个块框，与块相同。如果一个块盒在引入框之后，引入框成为块框的第一个嵌入框。如果是内联框，则运行框变成一个块框。 |
如果运行框包含一个块，则与块相同。如果一个块在引入框之后，引入框成为块框的第一个嵌入框。如果是内联框，则运行框变成一个块框。
<display-inside>这些关键字指定元素的内部显示类型，它定义了布局其内容的格式化上下文的类型（假设它是非替换元素）。它们被定义如下：
| 值 | 描述 |
|---|---|
| flow | 该元素使用流布局（块内布局）布局其内容。如果其外部显示类型是内联或者插入，并且正在参与块或内联格式化上下文，则它会生成一个内联框。否则，它会生成一个块容器框。根据其他属性的值（例如位置，浮点数或溢出）以及它本身是否参与块或内联格式化上下文，它要么为其内容建立新的块格式上下文，要么将其内容整合到其父格式中上下文。 |
| flow-root | 该元素生成一个块元素框，建立一个新的块格式上下文。 |
| table | 这些元素的行为像<table> HTML元素。它定义了一个块级的框。 |
| flex | 该元素的行为类似于块元素，并根据flexbox模型展示其内容。 |
| -webkit-FLEX | 别名为flex。 |
| -moz-box / -webkit-box | 根据过时的Flexbox规范，元素的行为类似于灵活的框。 |
| grid | 该元素的行为像块元素，并根据网格模型展示其内容。 |
| subgrid | 如果父元素具有display：grid，则元素本身及其内容按照网格模型进行布局。 |
| ruby | 该元素的行为像一个内联元素，并根据ruby格式化模型布局其内容。它的行为像相应的<ruby> HTML元素。 |
<display-listitem>
元素为内容和一个单独的列表项行内框生成一个块框。
如果未指定<display-inside>值，则主框的内部显示类型默认为flow。如果未指定<display-outside>值，则主框的外部显示类型默认为block。
<display-internal>
一些布局模型，如table和ruby，有一个复杂的内部结构，有几个不同的角色，他们的子代和后代可以填补。本节定义了那些“内部”显示值，这些值仅在特定布局模式中有意义。
除非另有规定，使用这些显示值的元素的内部显示类型和外部显示类型都设置为给定的关键字。
| 值 | 描述 |
|---|---|
| table-row-group | 这些元素的行为就像<tbody> HTML元素 |
| table-header-group | 这些元素的行为像<thead> HTML元素。 |
| table-footer-group | 这些元素的行为像<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> 元素。 |
| ruby-text | 这些元素的行为像<rt>元素。 |
| ruby-base-container | 这些元素的行为就像生成为匿名框的<rbc>元素一样。 |
| ruby-text-container | 这些元素的行为像<rtc>元素。 |
<display-box>这些值定义元素是否生成显示框。
| 值 | 描述 |
|---|---|
| contents | 这些元素本身并不产生特定的盒子。他们被他们的伪箱子和他们的子箱子取代。 |
| none | 关闭元素的显示，使其对布局没有影响（文档呈现为元素不存在）。所有的后代元素也关闭了他们的显示。要使元素占用通常需要的空间，但是实际上不需要渲染任何东西，请改为使用可见性属性。 |
<display-legacy> CSS 2对该display属性使用了单关键字语法，要求单独的关键字用于相同布局模式的块级别和内联级别。它们被定义如下：
| 值 | 描述 |
|---|---|
| inline-block | 该元素生成一个块元素框，它将与周围的内容一起流动，就好像它是一个单行内嵌框（行为很像被替换的元素）。它等价于内联流根。 |
| inline-table | 内联表值在HTML中没有直接映射。它的行为像一个<table> HTML元素，但是作为一个内联框，而不是一个块级框。表格框内是一个块级的上下文。这相当于内联表格。 |
| inline-flex | 该元素的行为像一个内联元素，并根据flexbox模型展示其内容。这相当于内联flex。 |
| -webkit-inline-flex | 内联flex的别名。 |
| -moz-inline-box / -webkit-inline-box | 该元素按照过时的Flexbox规范表现得像一个内联灵活框。 |
| inline-grid | 元素的行为像一个内联元素，并根据网格模型展示其内容。 |
形式语法
[ <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 | subgrid | ruby <display-listitem> = list-item && <display-outside>? && [ flow | flow-root ]? <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
实例
隐藏元素
HTML内容
<p>Visible text</p> <p class="secret">Invisible text</p>
CSS内容
p.secret {
display: none;
} 结果
查看活动示例
规范
| Specification | Status | Comment |
|---|---|---|
| CSS Display Module Level 3The definition of ‘display‘ in that specification. | Working Draft | Added run-in, flow, flow-root, contents, and multi-keyword values. |
| CSS Ruby Layout Module Level 1The definition of ‘display‘ in that specification. | Working Draft | Added ruby, ruby-base, ruby-text, ruby-base-container, and ruby-text-container. |
| CSS Grid LayoutThe definition of ‘display‘ in that specification. | Candidate Recommendation | Added the grid box model values. |
| CSS Flexible Box Layout ModuleThe definition of ‘display‘ in that specification. | Candidate Recommendation | Added the flexible box model values. |
| CSS Level 2 (Revision 1)The definition of ‘display‘ in that specification. | Recommendation | Added the table model values and inline-block. |
| CSS Level 1The definition of ‘display‘ in that specification. | Recommendation | Initial definition. Basic values: none, block, inline, and list-item. |
浏览器兼容性
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| none, inline and block | 1.0 | (Yes) | 1.0 (1.7 or earlier) | 4.0 | 7.0 | 1.0 (85) |
| inline-block | 1.0 | (Yes) | 3.0 (1.9) | 5.54 | 7.0 | 1.0 (85) |
| list-item | 1.0 | (Yes) | 1.0 (1.7 or earlier) | 6.0 | 7.0 | 1.0 (85) |
| run-in | 1.0 5 | (Yes) | No support | 8.0 | 7.0 | 1.0 (85)5 |
| 4.0 Removed in 32 | 5.0 (532.5) Removed in 8.0 | |||||
| inline-table | 1.0 | (Yes) | 3.0 (1.9) | 8.0 | 7.0 | 1.0 (85) |
| table, table-cell, table-column, table-column-group, table-header-group, table-row-group, table-footer-group, table-row, and table-caption | 1.0 | (Yes) | 1.0 (1.7 or earlier) | 8.0 | 7.0 | 1.0 (85) |
| flex | 21.0-webkit 29.0 | (Yes) | 18.0 (18.0)1 20.0 (20.0) | 10-ms8 11 | 12.50 | 6.1-webkit 9.0 |
| inline-flex | 21.0-webkit | (Yes) | 18.0 (18.0)1 20.0 (20.0) | 10-ms8 11 | 12.50 | 6.1-webkit |
| grid | 57 | (Yes)-ms | 45.0 (45.0)6 | 10.0-ms | 44 | TP |
| inline-grid | 57 | (Yes)-ms | 45.0 (45.0)6 | 10.0-ms | 44 | TP |
| subgrid | ? | No support | ? | No support | ? | ? |
| ruby, ruby-base, ruby-text, ruby-base-container, ruby-text-container | ? | (Yes) | 34.0 (34.0)3 | ? | ? | ? |
| contents | 587 | No support | 37 (37)2 | No support | No support | No support |
| -webkit-box | (Yes) | ? | 45.0 (45.0) | No support | (Yes) | ? |
| -webkit-inline-box | (Yes) | ? | 48.0 (48.0) | No support | (Yes) | ? |
| -webkit-flex, -webkit-inline-flex | (Yes) | ? | 48.0 (48.0) | No support | (Yes) | ? |
| flow-root | 58 | ? | 53.0 (53.0) | ? | 45 | ? |
| Feature | Android Webview | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|---|
| Basic support | (Yes) | (Yes) | (Yes) | ? | ? | (Yes) | 7.0-webkit |
| grid | 57 | 57 | ? | ? | ? | 44 | ? |
| inline-grid | 57 | 57 | ? | ? | ? | 44 | ? |
| flow-root | 58 | 58 | ? | ? | ? | 45 | ? |