display

语法：

display：none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | compact | run-in | ruby | ruby-base | ruby-text | ruby-base-group | ruby-text-group | flex | inline-flex

默认值：inline

适用于：所有元素

继承性：无

取值：

none：
隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
inline：
指定对象为内联元素。
block：
指定对象为块元素。
list-item：
指定对象为列表项目。
inline-block：
指定对象为内联块元素。（CSS2）
table：
指定对象作为块元素级的表格。类同于html标签<table>（CSS2）
inline-table：
指定对象作为内联元素级的表格。类同于html标签<table>（CSS2）
table-caption：
指定对象作为表格标题。类同于html标签<caption>（CSS2）
table-cell：
指定对象作为表格单元格。类同于html标签<td>（CSS2）
table-row：
指定对象作为表格行。类同于html标签<tr>（CSS2）
table-row-group：
指定对象作为表格行组。类同于html标签<tbody>（CSS2）
table-column：
指定对象作为表格列。类同于html标签<col>（CSS2）
table-column-group：
指定对象作为表格列组显示。类同于html标签<colgroup>（CSS2）
table-header-group：
指定对象作为表格标题组。类同于html标签<thead>（CSS2）
table-footer-group：
指定对象作为表格脚注组。类同于html标签<tfoot>（CSS2）
compact：
分配对象为块对象或基于内容之上的内联对象（CSS3）
run-in：
根据上下文决定对象是内联对象还是块级对象。（CSS3）
如果run-in元素包含了一个块级元素，run-in元素将变成块级元素；
如果块内有一个块级元素（非float和position定义）紧跟run-in元素之后，run-in元素将变成块内第一个内联元素；一个run-in元素不能插入开始已有run-in元素或者本身就是run-in元素的块中；
其它情况下，run-in元素都将是一个块级元素；
ruby：
将对象作为表格脚注组显示（CSS3）
ruby-base：
将对象作为表格脚注组显示（CSS3）
ruby-text：
将对象作为表格脚注组显示（CSS3）
ruby-base-group：
将对象作为表格脚注组显示（CSS3）
ruby-text-group：
将对象作为表格脚注组显示（CSS3）
flex：
将对象作为弹性盒模型显示（CSS3）
inline-flex：
将对象作为内联块级弹性盒模型显示（CSS3）

* CSS3新增属性可能存在描述错误及变更，仅供参考，持续更新

说明：

设置或检索对象是否及如何显示。
  • 如果display设置为none，float及position属性定义将不生效；
  • 如果position既不是static也不是relative，float属性定义将不生效；
  • IE7及更早浏览器只支持 none | inline | block | inline-block | list-item 属性值；
  • Opera12.10及以上已支持直接写属性值：flex | inline-flex 而不用加前缀；
  • Firefox15-18仍然只支持flex的老写法：-moz-box | -moz-inline-box，所以在这里暂时把它归到不支持flex的浏览器范畴里。
  • 对应的脚本特性为display。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 IE Firefox Safari Chrome Opera
较早版本 6-7 #1 #2 #3 #4 #5 4-18 #2 #3 #4 #5 5.1.7 #4 21-25 #4 11.5-12.0 #4 #5
较新版本 8 #2 #4 #5
最近版本 9 #2 #5 12.1-12.5 #4
  1. 不支持：table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group 属性值。
  2. 不支持：compact 属性值。
  3. 不支持：run-in 属性值。
  4. 不支持：ruby | ruby-base | ruby-text | ruby-base-group | ruby-text-group 属性值。
  5. 不支持：flex | inline-flex 属性值。

示例：