mozilla

display

概述

 

这个属性指定元素渲染出来的盒类型。在 HTML 中,默认的 display 属性取决于 HTML 规范所描述的行为或浏览器/用户的默认样式表。在 XML中,其默认值为 inline。

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

  • 初始值 inline
  • 适用元素 all elements
  • 是否是继承属性 no
  • 适用媒体 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.
  • 是否适用于 CSS 动画
  • 正规顺序 the unique non-ambiguous order defined by the formal grammar

语法

 
Formal syntax: none | inline | block | 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

 

 

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

 

Table model values (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 These elements behave like <caption> HTML elements.
table-cell These elements behave like <td> HTML elements.
table-column These elements behave like  <col> HTML elements.
table-column-group These elements behave like  <colgroup> HTML elements.
table-footer-group These elements behave like <tfoot> HTML elements.
table-header-group These elements behave like <thead> HTML elements.
table-row These elements behave like <tr> HTML elements.
table-row-group These elements behave like <tbody> HTML elements
Flexbox model values (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.
Grid box model values (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 formatting model values (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.
Experimental values 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-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 rubyruby-baseruby-textruby-base-container, and ruby-text-container 
CSS Grid Layout
display
Working Draft 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: noneblockinline, and list-item.

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
noneinline 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)
tabletable-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 ? ?
rubyruby-base,ruby-textruby-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

参见

文档标签和贡献者

标签: 
向此页面作出贡献: teoli, TigerSoldier, aaron4512, valiantk, paddingme, FredWe
最后编辑者: FredWe,