display

概述

 

display CSS属性指定用于元素的呈现框的类型。在 HTML 中，默认的 display 属性取决于 HTML 规范所描述的行为或浏览器/用户的默认样式表。在 XML中，其默认值为 inline。

除了多种不同的生成的元素的盒类型，值 none 可以关闭一个元素的显示；当你使用 none 所有的后代元素他们的显示也会被关闭。文档渲染的过程中就好像在文档树中这个元素不存在一样。

初始值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

语法

 
Formal syntax: none | inline | block | list-item | inline-list-item | inline-block | inline-table | table | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group | flex | inline-flex | grid | inline-grid | run-in | ruby | ruby-base | ruby-text | ruby-base-container | ruby-text-container | contents

display: none
display: inline
display: block
display: contents
display: list-item
display: inline-block
display: inline-table
display: table
display: table-cell
display: table-column
display: table-column-group
display: table-footer-group
display: table-header-group
display: table-row
display: table-row-group
display: flex
display: inline-flex
display: grid
display: inline-grid
display: ruby
display: ruby-base
display: ruby-text
display: ruby-base-container
display: ruby-text-container 
display: run-in
display: inherit
display: initial
display: unset

取值

 
display 值

 是一个关键字用来限定应用到元素渲染的类型，它可能的值以及它们的含义是：

值集合 值 描述
基本值(CSS 1) none

 关闭一个元素的显示（对布局没有影响）；其所有后代元素都也被会被关闭显示。文档渲染时，该元素如同不存在。

要想让元素在隐藏的同时占据其原有的位置，请参见 visibility  属性。
inline

该元素生成一个或多个行内元素盒。
block 该元素生成一个块元素盒。
list-item

 

该元素生成一个容纳内容和单独的列表行内元素盒的块状盒。
扩展值 (CSS 2.1) inline-block

 

 

该元素生成一个块状盒，该块状盒随着周围内容流动，如同它是一个单独的行内盒子（表现更像是一个被替换的元素）

 
表格模型值 (CSS 2.1) inline-table The inline-table value does not have a direct mapping in HTML. It behaves like a <table> HTML element, but as an inline box, rather than a block-level box. Inside the table box is a block-level context.
table 这个元素的作用就像  <table> 元素. 它定义了一个块级盒子.
table-caption 这个元素的作用的就像<caption> 一样。.
table-cell 这个元素的作用就像<td> 一样。
table-column 这个元素的作用就像<col> 一样
table-column-group 这个元素的作用就像<colgroup> 一样。
table-footer-group 这个元素的作用就像<tfoot> 一样.
table-header-group 这个元素的作用就像<thead> 一样
table-row 这个元素的作用就像<tr> 一样.
table-row-group 这个元素的作用就像<tbody> 一样。
Flexbox模型值 (CSS3) flex The element behaves like a block element and lays out its content according to the flexbox model.
inline-flex The element behaves like an inline element and lays out its content according to the flexbox model.
栅格盒模型值 (CSS3) grid

The element behaves like a block element and lays out its content according to the grid model.

As this is experimental, most browsers don't support it. Especially pay attention that -moz-grid is not the prefixed version of this, but a XUL layout model that must not be used on a Web site.
inline-grid The element behaves like an inline element and lays out its content according to the grid model.
Ruby（东亚文字注音或注释）格式化模型值 (CSS3) ruby The element behaves like an inline element and lays out its content according to the ruby formatting model. It behaves like the corresponding <ruby> HTML elements.
ruby-base These elements behave like <rb> elements.
ruby-text These elements behave like <rt> elements.
ruby-base-container These elements behave like <rbc> elements generated as anonymous boxes.
ruby-text-container These elements behave like <rbc> elements.
实验性的值 run-in
  • If the run-in box contains a block box, same as block.
  • If a block box follows the run-in box, the run-in box becomes the first inline box of the block box.
  • If an inline box follows, the run-in box becomes a block box.
contents These elements don't produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes.

形式化语法

none | inline | block | list-item | inline-list-item | inline-block | inline-table | table | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group | flex | inline-flex | grid | inline-grid | run-in | ruby | ruby-base | ruby-text | ruby-base-container | ruby-text-container | contents

例子

 

查看在线演示

p.secret  { display: none }
<p style="display:none"> invisible text </p>

规范

规范 状态 注释
CSS Display Module Level 3
display		 Working Draft Added the run-in and contents values.
CSS Ruby Layout Module Level 1
display		 Working Draft Added the ruby, ruby-base, ruby-text, ruby-base-container, and ruby-text-container 
CSS Grid Layout
display		 Candidate Recommendation Added the grid box model values.
CSS Flexible Box Layout Module
display		 Candidate Recommendation Added the flexible box model values.
CSS Level 2 (Revision 1)
display		 Recommendation Added the table model values and inline-block.
CSS Level 1
display		 Recommendation Basic values: none, block, inline, and list-item.

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
none, inline andblock 1.0 1.0 (1.7 or earlier) 4.0 7.0 1.0 (85)
inline-block 1.0 3.0 (1.9) 5.5 [4] 7.0 1.0 (85)
list-item 1.0 1.0 (1.7 or earlier) 6.0 7.0 1.0 (85)
run-in 1.0 [5] 未实现 8.0 7.0 1.0 (85) [5]

4.0

Removed in 32

 5.0 (532.5)
inline-table 1.0 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, andtable-caption 1.0 1.0 (1.7 or earlier) 8.0 7.0 1.0 (85)
flex 21.0-webkit 18.0 (18.0) [1]
20.0 (20.0)		 11 12.50 6.1-webkit
inline-flex 21.0-webkit 18.0 (18.0) [1]
20.0 (20.0)		 11 12.50 6.1-webkit
grid ? 未实现 10.0-ms ? ?
inline-grid ? 未实现 10.0-ms ? ?
ruby, ruby-base,ruby-text, ruby-base-container,ruby-text-container ? 34.0 (34.0) [3] ? ? ?
contents 未实现 37 (37) [2] 未实现 未实现 未实现
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 4.4 ? ? ? 7.0-webkit

[1] To activate flexbox support, for Firefox 18 and 19, the user has to change the about:config preference "layout.css.flexbox.enabled" to true. Multi-line flexbox are supported since Firefox 28.

[2] In Firefox 36, it the preference governing this feature was off by default.

[3] CSS Ruby support is behind pref "layout.css.ruby.enabled". The user has to change this pref to true to activate this.

[4] Natural inline elements only

[5] Not before inline-elements

参见

文档标签和贡献者