翻译正在进行中。

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 typediscrete
正规顺序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 取值的单独页面上有多个示例——见 Syntax

除此之外,你可以在 MDN 上找到布局模型的详细解释:

可访问性相关

display: none;

将 display 设置为 none 会将元素从可访问性树中移除。这会导致该元素及其后续元素不再被屏幕阅读技术访问。

如果你只是想从视觉上隐藏这个元素,对可访问性更加友好的做法是使用属性组合来将其从屏幕上隐藏,但仍可以被屏幕阅读器等辅助技术解析。

display: contents;

浏览器会将所有将 display 设置为 contents 的元素从可访问性树中移除。这会导致该元素及其后续元素不再被屏幕阅读技术访问。

Tables

将 <table> 元素的 display 值修改为 block, grid 或 flex 会修改其在可访问性树中的表示,这会使得表格不能被屏幕阅读技术正常处理。

规范

规范 状态 备注
CSS Display Module Level 3
display
Candidate Recommendation 新增 run-in, flow, flow-root, contents, 以及多关键字的值.
CSS Ruby Layout Module Level 1
display
Working Draft 新增 ruby, ruby-base, ruby-text, ruby-base-container, 和 ruby-text-container.
CSS Grid Layout
display
Candidate Recommendation 新增 grid 盒模型的值.
CSS Flexible Box Layout Module
display
Candidate Recommendation 新增 flexible 盒模型的值.
CSS Level 2 (Revision 1)
display
Recommendation 新增 table 和 inline-block.
CSS Level 1
display
Recommendation 初始定义. 基础值: none, block, inline, 以及 list-item.

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 7Safari Full support 1WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
display-outsideChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 7Safari Full support 1WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
display-outside: display: run-in supportChrome No support ? — 32Edge No support NoFirefox No support NoIE Full support 8Opera No support ? — 19Safari No support ? — 7WebView Android Full support YesChrome Android No support ? — 32Edge Mobile No support NoFirefox Android No support NoOpera Android No support ? — 19Safari iOS No support ? — 7Samsung Internet Android Full support Yes
Multi-keyword values
Experimental
Chrome ? Edge ? Firefox No support NoIE No support NoOpera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android No support NoOpera Android ? Safari iOS ? Samsung Internet Android ?
list-itemChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 6Opera Full support 7Safari Full support 1WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
list-item: Supported on <legend>Chrome No support NoEdge No support NoFirefox Full support 64IE No support NoOpera No support NoSafari Full support YesWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android Full support 64Opera Android No support NoSafari iOS Full support YesSamsung Internet Android No support No
inline-blockChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 8
Full support 8
Partial support 6
Notes
Notes Until Internet Explorer 8, inline-block is only for natural inline elements.
Opera Full support 7Safari Full support 1WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
inline-tableChrome Full support 1Edge Full support 12Firefox Full support 3IE Full support 8Opera Full support 7Safari Full support 1WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
table, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row, and table-row-groupChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 8Opera Full support 7Safari Full support 1WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
flexChrome Full support 29
Full support 29
Full support 21
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 12Firefox Full support 20
Notes
Full support 20
Notes
Notes Firefox 28 added multi-line flexbox support.
No support 18 — 28
Disabled
Disabled From version 18 until version 28 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Full support 11
Full support 11
Full support 8
Alternate Name
Alternate Name Uses the non-standard name: -ms-flexbox
Opera Full support 16
Full support 16
Full support 15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
No support 12.1 — 15
Safari Full support 9
Full support 9
Full support 6.1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
WebView Android Full support 4.4
Full support 4.4
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android Full support 29
Full support 29
Full support 25
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Mobile Full support 12Firefox Android Full support 20
Notes
Full support 20
Notes
Notes Firefox 28 added multi-line flexbox support.
No support 18 — 28
Disabled
Disabled From version 18 until version 28 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 16
Full support 16
Full support 14
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
No support 12.1 — 14
Safari iOS Full support 9
Full support 9
Full support 7.1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Samsung Internet Android Full support Yes
inline-flexChrome Full support 29
Full support 29
Full support 21
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 12Firefox Full support 20
Notes
Full support 20
Notes
Notes Firefox 28 added multi-line flexbox support.
No support 18 — ?
Disabled
Disabled From version 18: this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Full support 11
Full support 11
Full support 8
Alternate Name
Alternate Name Uses the non-standard name: -ms-inline-flexbox
Opera Full support 16
Full support 16
Full support 15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari Full support 9
Full support 9
Full support 6.1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
WebView Android Full support 4.4
Full support 4.4
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android Full support 29
Full support 29
Full support 25
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Mobile Full support 12Firefox Android Full support 20
Notes
Full support 20
Notes
Notes Firefox 28 added multi-line flexbox support.
No support 18 — ?
Disabled
Disabled From version 18: this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 16
Full support 16
Full support 14
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari iOS Full support 9
Full support 9
Full support 6.1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Samsung Internet Android Full support Yes
grid
Experimental
Chrome Full support 57Edge Full support 16
Full support 16
Full support 12
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Firefox Full support 52IE Partial support 10
Prefixed Notes
Partial support 10
Prefixed Notes
Prefixed Implemented with the vendor prefix: -ms-
Notes Internet Explorer implements an older version of the specification.
Opera Full support 44Safari Full support YesWebView Android Full support 57Chrome Android Full support 57Edge Mobile Full support 16
Full support 16
Full support 12
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Firefox Android Full support 52Opera Android Full support 44Safari iOS Full support YesSamsung Internet Android Full support 7.0
inline-grid
Experimental
Chrome Full support 57Edge Full support 16
Full support 16
Full support 12
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Firefox Full support 52IE Partial support 10
Prefixed Notes
Partial support 10
Prefixed Notes
Prefixed Implemented with the vendor prefix: -ms-
Notes Internet Explorer implements an older version of the specification.
Opera Full support 44Safari ? WebView Android Full support 57Chrome Android Full support 57Edge Mobile Full support 16
Full support 16
Full support 12
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Firefox Android Full support 52Opera Android Full support 44Safari iOS ? Samsung Internet Android Full support 7.0
subgrid
Deprecated
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
ruby, ruby-base, ruby-base-container, ruby-text, and ruby-text-container
Experimental
Chrome ? Edge Full support 12Firefox Full support 38
Full support 38
No support 34 — 38
Disabled
Disabled From version 34 until version 38 (exclusive): this feature is behind the layout.css.ruby.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile Full support 12Firefox Android Full support 38
Full support 38
No support 34 — 38
Disabled
Disabled From version 34 until version 38 (exclusive): this feature is behind the layout.css.ruby.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS ? Samsung Internet Android ?
run-in
Experimental
Chrome No support 1 — 32
Notes
No support 1 — 32
Notes
Notes Before Chrome 4, run-in was not supported before inline elements.
Edge No support NoFirefox No support NoIE Full support 8Opera No support 7 — 15Safari No support 1 — 8
Notes
No support 1 — 8
Notes
Notes Before Safari 5, run-in was not supported before inline elements.
WebView Android No support ? — 4.4.3
Notes
No support ? — 4.4.3
Notes
Notes Before version 4, run-in was not supported before inline elements.
Chrome Android No support ? — 32
Notes
No support ? — 32
Notes
Notes Before Chrome 4, run-in was not supported before inline elements.
Edge Mobile No support NoFirefox Android No support NoOpera Android ? Safari iOS No support ? — 8
Notes
No support ? — 8
Notes
Notes Before Safari 5, run-in was not supported before inline elements.
Samsung Internet Android ?
flow-root
Experimental
Chrome Full support 58Edge ? Firefox Full support 53IE ? Opera Full support 45Safari ? WebView Android Full support 58Chrome Android Full support 58Edge Mobile ? Firefox Android Full support 53Opera Android Full support 45Safari iOS ? Samsung Internet Android Full support 7.0
contents
Experimental
Chrome Full support 65
Full support 65
No support 58 — 65
Disabled
Disabled From version 58 until version 65 (exclusive): this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge No support NoFirefox Full support 37
Full support 37
No support 36 — 53
Disabled
Disabled From version 36 until version 53 (exclusive): this feature is behind the layout.css.display-contents.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 52Safari Full support 11.1WebView Android Full support 65Chrome Android Full support 65Edge Mobile No support NoFirefox Android Full support 57Opera Android Full support 52Safari iOS Full support 11.1Samsung Internet Android No support No
contents: Specific behavior of unusual elements when display: contents is applied to them
Experimental
Chrome ? Edge No support NoFirefox Full support 59IE No support NoOpera No support NoSafari No support NoWebView Android ? Chrome Android ? Edge Mobile No support NoFirefox Android Full support 59Opera Android No support NoSafari iOS No support NoSamsung Internet Android ?
-moz-box and -moz-inline-box
DeprecatedNon-standard
Chrome No support NoEdge No support NoFirefox No support ? — 64
Notes
No support ? — 64
Notes
Notes This is still available to Firefox UI code.
Full support 62
Disabled
Disabled From version 62: this feature is behind the layout.css.xul-box-display-values.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android No support ? — 64
Notes
No support ? — 64
Notes
Notes This is still available to Firefox UI code.
Full support 62
Disabled
Disabled From version 62: this feature is behind the layout.css.xul-box-display-values.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
-moz-grid, -moz-inline-grid, -moz-grid-group and -moz-grid-line
DeprecatedNon-standard
Chrome No support NoEdge No support NoFirefox No support ? — 62
Notes
No support ? — 62
Notes
Notes This is still available to Firefox UI code.
Full support 62
Disabled
Disabled From version 62: this feature is behind the layout.css.xul-display-values.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android No support ? — 62
Notes
No support ? — 62
Notes
Notes This is still available to Firefox UI code.
Full support 62
Disabled
Disabled From version 62: this feature is behind the layout.css.xul-display-values.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
-moz-stack and -moz-inline-stack
DeprecatedNon-standard
Chrome No support NoEdge No support NoFirefox No support ? — 62
Notes
No support ? — 62
Notes
Notes This is still available to Firefox UI code.
Full support 62
Disabled
Disabled From version 62: this feature is behind the layout.css.xul-display-values.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android No support ? — 62
Notes
No support ? — 62
Notes
Notes This is still available to Firefox UI code.
Full support 62
Disabled
Disabled From version 62: this feature is behind the layout.css.xul-display-values.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
-moz-deck
DeprecatedNon-standard
Chrome No support NoEdge No support NoFirefox No support ? — 62
Notes
No support ? — 62
Notes
Notes This is still available to Firefox UI code.
Full support 62
Disabled
Disabled From version 62: this feature is behind the layout.css.xul-display-values.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android No support ? — 62
Notes
No support ? — 62
Notes
Notes This is still available to Firefox UI code.
Full support 62
Disabled
Disabled From version 62: this feature is behind the layout.css.xul-display-values.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
-moz-popup
DeprecatedNon-standard
Chrome No support NoEdge No support NoFirefox No support ? — 62
Notes
No support ? — 62
Notes
Notes This is still available to Firefox UI code.
Full support 62
Disabled
Disabled From version 62: this feature is behind the layout.css.xul-display-values.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android No support ? — 62
Notes
No support ? — 62
Notes
Notes This is still available to Firefox UI code.
Full support 62
Disabled
Disabled From version 62: this feature is behind the layout.css.xul-display-values.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
Partial support  
Partial support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Uses a non-standard name.
Uses a non-standard name.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

参见

文档标签和贡献者

标签: 
最后编辑者: cissoid,