在此页

• 参考
• 指南
• 规范
• 浏览器兼容性
• 相关话题

CSS Display is a module of CSS that defines how the CSS formatting box tree is generated from the document element tree and defines properties controlling it.

参考

CSS properties

• display

CSS data types

• <display-outside>
• <display-inside>
• <display-listitem>
• <display-box>
• <display-internal>
• <display-legacy>

指南

CSS Flow Layout ( display: block , display: inline )

• Block and Inline Layout in Normal Flow
• Flow Layout and Overflow
• Flow Layout and Writing Modes
• Formatting Contexts Explained
• In Flow and Out of Flow

display: flex

• Basic concepts of flexbox
• Aligning Items in a Flex Container
• Controlling Ratios of Flex Items Along the Main Axis
• Cross-browser Flexbox mixins
• Mastering Wrapping of Flex Items
• Ordering Flex Items
• Relationship of flexbox to other layout methods
• Backwards Compatibility of Flexbox
• Typical use cases of Flexbox

display: grid

• Basic Concepts of Grid Layout
• Relationship to other layout methods
• Line-based placement
• Grid template areas
• Layout using named grid lines
• Auto-placement in grid layout
• Box alignment in grid layout
• Grids, logical values and writing modes
• CSS Grid Layout and Accessibility
• CSS Grid Layout and Progressive Enhancement
• Realizing common layouts using grids

规范

规范	状态	注释
CSS Display Module Level 3 The definition of 'display' in that specification.	候选推荐	添加 run-in , flow , flow-root , contents and multi-keyword values.
CSS Level 2 (Revision 1) The definition of 'display' in that specification.	推荐	Added the table model values and inline-block .
CSS Level 1 The definition of 'display' in that specification.	推荐	Initial definition. Basic values: none , block , inline and list-item .

In addition to the CSS Display Specification Level 3, further specifications define the behavior of various values of display.

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
display	Chrome 完整支持 1	Edge 完整支持 12	Firefox 完整支持 1	IE 完整支持 4	Opera 完整支持 7	Safari 完整支持 1	WebView Android 完整支持 ≤37	Chrome Android 完整支持 18	Firefox Android 完整支持 4	Opera Android 完整支持 10.1	Safari iOS 完整支持 1	Samsung Internet Android 完整支持 1.0
contents	Chrome 完整支持 65 完整支持 65 不支持 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 完整支持 79	Firefox 完整支持 37 完整支持 37 不支持 36 — 53 Disabled Disabled ). To change preferences in Firefox, visit	IE 不支持 No	Opera 完整支持 52 完整支持 52 不支持 45 — 52 Disabled Disabled From version 45 until version 52 (exclusive): this feature is behind the Enable experimental Web Platform features preference.	Safari 完整支持 11.1	WebView Android 完整支持 65	Chrome Android 完整支持 65 完整支持 65 不支持 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.	Firefox Android 完整支持 57	Opera Android 完整支持 47 完整支持 47 不支持 43 — 47 Disabled Disabled From version 43 until version 47 (exclusive): this feature is behind the Enable experimental Web Platform features preference.	Safari iOS 完整支持 11.3	Samsung Internet Android 完整支持 9.0
contents : Specific behavior of unusual elements when display: contents is applied to them	Chrome 完整支持 58	Edge 完整支持 79	Firefox 完整支持 59	IE 不支持 No	Opera 完整支持 45	Safari 不支持 No	WebView Android 完整支持 65	Chrome Android 完整支持 58	Firefox Android 完整支持 59	Opera Android 完整支持 43	Safari iOS 不支持 No	Samsung Internet Android 完整支持 9.0
<display-outside>	Chrome 完整支持 1	Edge 完整支持 12	Firefox 完整支持 1	IE 完整支持 4	Opera 完整支持 7	Safari 完整支持 1	WebView Android 完整支持 1	Chrome Android 完整支持 18	Firefox Android 完整支持 4	Opera Android 完整支持 10.1	Safari iOS 完整支持 1	Samsung Internet Android 完整支持 1.0
display-outside.run-in Experimental	Chrome 不支持 1 — 32 注意事项 不支持 1 — 32 注意事项 注意事项 Before Chrome 4, run-in was not supported before inline elements.	Edge 不支持 No	Firefox 不支持 No	IE 完整支持 8	Opera 不支持 7 — 19	Safari 不支持 1 — 8 注意事项 不支持 1 — 8 注意事项 注意事项 Before Safari 5, run-in was not supported before inline elements.	WebView Android 不支持 ≤37 — ≤37	Chrome Android 不支持 18 — 32	Firefox Android 不支持 No	Opera Android 不支持 10.1 — 19	Safari iOS 不支持 1 — 8 注意事项 不支持 1 — 8 注意事项 注意事项 Before Safari 5, run-in was not supported before inline elements.	Samsung Internet Android 不支持 1.0 — 2.0
flex	Chrome 完整支持 29	Edge 完整支持 12	Firefox 完整支持 20 注意事项 完整支持 20 注意事项 注意事项 Firefox 28 added multi-line flexbox support. 不支持 18 — 28 Disabled Disabled ). To change preferences in Firefox, visit	IE 部分支持 11 注意事项 部分支持 11 注意事项 注意事项 IE incorrectly positions inline block content inside flex containers. See the discussion on Microsoft Answers . 部分支持 8 注意事项 Alternate Name 注意事项 IE incorrectly positions inline block content inside flex containers. See the discussion on Microsoft Answers . Alternate Name Uses the non-standard name: -ms-flexbox	Opera 完整支持 16 完整支持 16 Prefixed Implemented with the vendor prefix: -webkit- 不支持 12.1 — 15	Safari 完整支持 9	WebView Android 完整支持 4.4	Chrome Android 完整支持 29	Firefox Android 完整支持 20 注意事项 完整支持 20 注意事项 注意事项 Firefox 28 added multi-line flexbox support. 不支持 18 — 28 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 完整支持 16 完整支持 16 Prefixed Implemented with the vendor prefix: -webkit- 不支持 12.1 — 14	Safari iOS 完整支持 9	Samsung Internet Android 完整支持 2.0
flow-root	Chrome 完整支持 58	Edge 完整支持 79	Firefox 完整支持 53	IE 不支持 No	Opera 完整支持 45	Safari 完整支持 13	WebView Android 完整支持 58	Chrome Android 完整支持 58	Firefox Android 完整支持 53	Opera Android 完整支持 43	Safari iOS 完整支持 13	Samsung Internet Android 完整支持 7.0
grid	Chrome 完整支持 57	Edge 完整支持 16 完整支持 16 完整支持 12 Prefixed Prefixed Implemented with the vendor prefix: -ms-	Firefox 完整支持 52	IE 部分支持 10 Prefixed 注意事项 部分支持 10 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -ms- 注意事项 Internet Explorer implements an older version of the specification.	Opera 完整支持 44	Safari 完整支持 10.1	WebView Android 完整支持 57	Chrome Android 完整支持 57	Firefox Android 完整支持 52	Opera Android 完整支持 43	Safari iOS 完整支持 10.3	Samsung Internet Android 完整支持 6.0 注意事项 完整支持 6.0 注意事项 注意事项 Samsung Internet added this earlier than the corresponding Chrome version would indicate.
inline-block	Chrome 完整支持 1	Edge 完整支持 12	Firefox 完整支持 1	IE 完整支持 8 完整支持 8 部分支持 6 注意事项 注意事项 Until Internet Explorer 8, inline-block is only for natural inline elements.	Opera 完整支持 7	Safari 完整支持 1	WebView Android 完整支持 ≤37	Chrome Android 完整支持 18	Firefox Android 完整支持 4	Opera Android 完整支持 14	Safari iOS 完整支持 1	Samsung Internet Android 完整支持 1.0
inline-flex	Chrome 完整支持 29	Edge 完整支持 12	Firefox 完整支持 20 注意事项 完整支持 20 注意事项 注意事项 Firefox 28 added multi-line flexbox support. 不支持 18 — 20 Disabled Disabled ). To change preferences in Firefox, visit	IE 完整支持 11 完整支持 11 完整支持 8 Alternate Name Alternate Name Uses the non-standard name: -ms-inline-flexbox	Opera 完整支持 16	Safari 完整支持 9	WebView Android 完整支持 4.4	Chrome Android 完整支持 29	Firefox Android 完整支持 20 注意事项 完整支持 20 注意事项 注意事项 Firefox 28 added multi-line flexbox support. 不支持 18 — 20 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 完整支持 16	Safari iOS 完整支持 9	Samsung Internet Android 完整支持 2.0
inline-grid	Chrome 完整支持 57	Edge 完整支持 16 完整支持 16 完整支持 12 Prefixed Prefixed Implemented with the vendor prefix: -ms-	Firefox 完整支持 52	IE 部分支持 10 Prefixed 注意事项 部分支持 10 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -ms- 注意事项 Internet Explorer implements an older version of the specification.	Opera 完整支持 44	Safari 完整支持 10.1	WebView Android 完整支持 57	Chrome Android 完整支持 57	Firefox Android 完整支持 52	Opera Android 完整支持 43	Safari iOS 完整支持 10.3	Samsung Internet Android 完整支持 6.0 注意事项 完整支持 6.0 注意事项 注意事项 Samsung Internet added this earlier than the corresponding Chrome version would indicate.
inline-table	Chrome 完整支持 1	Edge 完整支持 12	Firefox 完整支持 3	IE 完整支持 8	Opera 完整支持 7	Safari 完整支持 1	WebView Android 完整支持 ≤37	Chrome Android 完整支持 18	Firefox Android 完整支持 4	Opera Android 完整支持 14	Safari iOS 完整支持 1	Samsung Internet Android 完整支持 1.0
list-item	Chrome 完整支持 1	Edge 完整支持 12	Firefox 完整支持 1	IE 完整支持 6	Opera 完整支持 7	Safari 完整支持 1	WebView Android 完整支持 ≤37	Chrome Android 完整支持 18	Firefox Android 完整支持 4	Opera Android 完整支持 14	Safari iOS 完整支持 1	Samsung Internet Android 完整支持 1.0
list-item : Supported on <legend>	Chrome 完整支持 71	Edge 完整支持 79	Firefox 完整支持 64	IE 不支持 No	Opera 完整支持 58	Safari 不支持 No	WebView Android 完整支持 71	Chrome Android 完整支持 71	Firefox Android 完整支持 64	Opera Android 完整支持 50	Safari iOS 不支持 No	Samsung Internet Android 完整支持 10.0
Multi-keyword values Experimental	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 70	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 不支持 No	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No
none	Chrome 完整支持 1 注意事项 完整支持 1 注意事项 注意事项 Chrome 65 stopped creating layout objects for elements inside an <iframe> with display:none applied.	Edge 完整支持 12	Firefox 完整支持 1	IE 完整支持 4	Opera 完整支持 7 注意事项 完整支持 7 注意事项 注意事项 Opera 52 stopped creating layout objects for elements inside an <iframe> with display:none applied.	Safari 完整支持 1	WebView Android 完整支持 ≤37 注意事项 完整支持 ≤37 注意事项 注意事项 WebView 65 stopped creating layout objects for elements inside an <iframe> with display:none applied.	Chrome Android 完整支持 18 注意事项 完整支持 18 注意事项 注意事项 Chrome 65 stopped creating layout objects for elements inside an <iframe> with display:none applied.	Firefox Android 完整支持 4	Opera Android 完整支持 10.1 注意事项 完整支持 10.1 注意事项 注意事项 Opera Android 47 stopped creating layout objects for elements inside an <iframe> with display:none applied.	Safari iOS 完整支持 1	Samsung Internet Android 完整支持 1.0 注意事项 完整支持 1.0 注意事项 注意事项 Chrome 65 stopped creating layout objects for elements inside an <iframe> with display:none applied.
ruby , ruby-base , ruby-base-container , ruby-text ，和 ruby-text-container	Chrome 不支持 No	Edge 不支持 12 — 79	Firefox 完整支持 38 完整支持 38 不支持 34 — 38 Disabled Disabled ). To change preferences in Firefox, visit	IE 完整支持 7	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 38 完整支持 38 不支持 34 — 38 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No
table , table-cell , table-column , table-column-group , table-footer-group , table-header-group , table-row ，和 table-row-group	Chrome 完整支持 1	Edge 完整支持 12	Firefox 完整支持 1	IE 完整支持 8	Opera 完整支持 7	Safari 完整支持 1	WebView Android 完整支持 ≤37	Chrome Android 完整支持 18	Firefox Android 完整支持 4	Opera Android 完整支持 14	Safari iOS 完整支持 1	Samsung Internet Android 完整支持 1.0
-moz-box and -moz-inline-box 弃用 非标	Chrome 不支持 No	Edge 不支持 No	Firefox 不支持 1 — 64 注意事项 不支持 1 — 64 注意事项 注意事项 This is still available to Firefox UI code. 完整支持 62 Disabled Disabled ). To change preferences in Firefox, visit	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 不支持 4 — 64 注意事项 不支持 4 — 64 注意事项 注意事项 This is still available to Firefox UI code. 完整支持 62 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No
-moz-deck 弃用 非标	Chrome 不支持 No	Edge 不支持 No	Firefox 不支持 1 — 62 注意事项 不支持 1 — 62 注意事项 注意事项 This is still available to Firefox UI code. 完整支持 62 Disabled Disabled ). To change preferences in Firefox, visit	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 不支持 4 — 62 注意事项 不支持 4 — 62 注意事项 注意事项 This is still available to Firefox UI code. 完整支持 62 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No
-moz-grid , -moz-grid-group ，和 -moz-grid-line 弃用 非标	Chrome 不支持 No	Edge 不支持 No	Firefox 不支持 1 — 62 注意事项 不支持 1 — 62 注意事项 注意事项 This is still available to Firefox UI code. 完整支持 62 Disabled Disabled ). To change preferences in Firefox, visit	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 不支持 4 — 62 注意事项 不支持 4 — 62 注意事项 注意事项 This is still available to Firefox UI code. 完整支持 62 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No
-moz-inline-grid and -moz-inline-stack 弃用 非标	Chrome 不支持 No	Edge 不支持 No	Firefox 不支持 1 — 62 注意事项 不支持 1 — 62 注意事项 注意事项 Available to Firefox UI code. 不支持 62 — 70 Disabled Disabled ). To change preferences in Firefox, visit	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 不支持 4 — 62 注意事项 不支持 4 — 62 注意事项 注意事项 This is still available to Firefox UI code. 完整支持 62 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No
-moz-popup 弃用 非标	Chrome 不支持 No	Edge 不支持 No	Firefox 不支持 1 — 62 注意事项 不支持 1 — 62 注意事项 注意事项 This is still available to Firefox UI code. 完整支持 62 Disabled Disabled ). To change preferences in Firefox, visit	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 不支持 4 — 62 注意事项 不支持 4 — 62 注意事项 注意事项 This is still available to Firefox UI code. 完整支持 62 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No
-moz-stack 弃用 非标	Chrome 不支持 No	Edge 不支持 No	Firefox 不支持 1 — 62 注意事项 不支持 1 — 62 注意事项 注意事项 This is still available to Firefox UI code. 完整支持 62 Disabled Disabled ). To change preferences in Firefox, visit	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 不支持 4 — 62 注意事项 不支持 4 — 62 注意事项 注意事项 This is still available to Firefox UI code. 完整支持 62 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No

图例

完整支持

完整支持

部分支持

部分支持

不支持

不支持

实验。期望将来行为有所改变。

实验。期望将来行为有所改变。

非标。预期跨浏览器支持较差。

非标。预期跨浏览器支持较差。

弃用。不要用于新网站。

弃用。不要用于新网站。

见实现注意事项。

见实现注意事项。

用户必须明确启用此特征。

用户必须明确启用此特征。

使用非标名称。

使用非标名称。

要求使用供应商前缀或不同名称。

要求使用供应商前缀或不同名称。

元数据

• 最后修改： Jul 7, 2020

相关话题

1. CSS
2. CSS 参考
3. CSS Display
4. 特性

   1. <display-box>
   2. <display-inside>
   3. <display-internal>
   4. <display-legacy>
   5. <display-listitem>
   6. <display-outside>
   7. display