[CSS参考手册](http://css.doyoe.com/)»[属性列表](#)»[布局属性](#)» 相关内容： [**其它布局属性参考**选择其它项](#) - [display](#) - [float](#) - [clear](#) - [visibility](#) - [clip](#) - [overflow](#) - [overflow-x](#) - [overflow-y](#) # display - **版本：CSS1/CSS2/CSS3** - 继承性：无 ### 语法： **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 | box | inline-box ### 取值： 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）ruby：将对象作为表格脚注组显示（CSS3）ruby-base：将对象作为表格脚注组显示（CSS3）ruby-text：将对象作为表格脚注组显示（CSS3）ruby-base-group：将对象作为表格脚注组显示（CSS3）ruby-text-group：将对象作为表格脚注组显示（CSS3）box：将对象作为弹性盒模型显示（CSS3）inline-box：将对象作为内联块级弹性盒模型显示（CSS3） ### 说明： **设置或检索对象是否及如何显示。** - *IE7及以下浏览器不支持table相关的参数值*，如：table, inline-table, table-caption, table-cell, table-row, table-row-group, table-column, table-column-group, table-footer-group, table-header-group - *写本文档时尚无浏览器支持ruby相关的参数值*，如：ruby, ruby-base, ruby-text, ruby-base-group, ruby-text-group - 对应的脚本特性为**display**。 ### 兼容性： - 浅绿 = 支持 - 红色 = 不支持 - 墨绿 = 部分支持 - 橙色 = 实验性质 <table class="gdataform"><thead><tr><th><a href="#browser" title="查看本文档测试时所用浏览器版本">支持版本</a>\类型</th> <th><span class="browser-ie">IE</span></th> <th><span class="browser-firefox">Firefox</span></th> <th><span class="browser-safari">Safari</span></th> <th><span class="browser-chrome">Chrome</span></th> <th><span class="browser-opera">Opera</span></th> </tr></thead><tbody><tr><th>较早版本</th> <td class="partsupport">6.0-7.0 ^{<a href="#support1">#1</a>}</td> <td class="partsupport" rowspan="3">4.0-6.0 ^{<a href="#support2">#2</a>}</td> <td class="partsupport" rowspan="3">5.1 ^{<a href="#support3">#3</a>}</td> <td class="partsupport" rowspan="3">13.0 ^{<a href="#support4">#4</a>}</td> <td class="partsupport" rowspan="3">11.50-11.51 ^{<a href="#support5">#5</a>}</td> </tr><tr><th>较新版本</th> <td class="partsupport">8.0 ^{<a href="#support6">#6</a>}</td> </tr><tr><th>最近版本</th> <td class="partsupport">9.0 ^{<a href="#support7">#7</a>}</td> </tr></tbody></table> 1. IE7及更早浏览器只支持none | inline | block | inline-block | list-item参数值。 1. Firefox4.0-6.0不支持所有的CSS3新增属性值。 1. Safari5.1不支持CSS3新增属性值：ruby | ruby-base | ruby-text | ruby-base-group | ruby-text-group。 1. Chrome13.0不支持CSS3新增属性值：ruby | ruby-base | ruby-text | ruby-base-group | ruby-text-group。 1. Opera10.50-10.51不支持CSS3新增属性值：ruby | ruby-base | ruby-text | ruby-base-group | ruby-text-group | box | inline-box。 1. IE8不支持CSS3新增属性值：compact | ruby | ruby-base | ruby-text | ruby-base-group | ruby-text-group | box | inline-box。 1. IE9不支持compact | box | inline-box属性值。 ### 示例： # display构造的table小例子，IE7及以下浏览器不支持本示例 ### 花名册： - 序号 - 姓名 - 年龄 - footer - footer - footer - 1 - John - 19 - 2 - Mark - 21 - 3 - Kate - 26 Copyright © 2006-2012 [Doyoe](http://www.doyoe.com/). All Rights Reserved