更多"Try it Yourself"下面的例子。
定义和用法
显示属性指定用于HTML元素框的类型。
| 默认值： | inline |
|---|---|
| 遗传： | no |
| 动画： | no. Read about animatable |
| 版： | CSS1 |
| JavaScript语法： | object .style.display="none" Try it |
浏览器支持
在表中的数字规定，完全支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| display | 4 | 8 从5.5分 | 3.0 | 3.1 | 7 |
Note:值"inline-table" ， "table" ， "table-caption" ， "table-cell" ， "table-column" ， "table-column-group" ， "table-row" ，和"table-row-group" ，不支持在IE7和更早版本。 IE8需要一个！DOCTYPE。 IE9支持值。
注：值"flex"和"inline-flex"需要一个前缀在Safari工作。 对于"flex"使用"display: -webkit-flex"对于"inline-flex"使用"display: -webkit-inline-flex;" 。
CSS语法
display:value;属性值
| 值 | 描述 | 播放 |
|---|---|---|
| inline | 默认值。 显示元素作为内联元素(like <span>) | 播放 ” |
| block | 显示元素作为一个块元素(like <p>) | 播放 ” |
| flex | 显示元素作为一个块级Flex容器。 新的CSS3 | |
| inline-block | 显示元素作为一个行内块容器中。 该块的内部被格式化为块级框，并且元件本身被格式化为一个行内框 | |
| inline-flex | 显示元素作为一个行内柔性容器。 新的CSS3 | |
| inline-table | 元素显示为一个行内表 | |
| list-item | 让元素表现得像个<li>元素 | 播放 ” |
| run-in | 显示一个元素作为阻止或内联，根据上下文 | |
| table | 让元素像一个<table>元素 | |
| table-caption | 让元素表现得像个<caption>元素 | |
| table-column-group | 让元素表现得像个<colgroup>元素 | |
| table-header-group | 让元素表现得像个<thead>元素 | |
| table-footer-group | 让元素表现得像个<tfoot>元素 | |
| table-row-group | 让元素表现得像个<tbody>元素 | |
| table-cell | 让元素像一个<td>元素 | |
| table-column | 让元素表现得像个<col>元素 | |
| table-row | 让元素像一个<tr>元素 | |
| none | 该元件将不会在所有显示(has no effect on layout) | 播放 ” |
| initial | 将此属性设置为默认值。 阅读关于初始 | 播放 ” |
| inherit | 继承其父元素此属性。 阅读关于继承 |
更多示例
例
设置的里面的一些灵活的项目方向<div>以相反的顺序元素：
div {
display: -webkit-flex; /* Safari */
-webkit-flex-direction: row-reverse; /* Safari 6.1+ */
display: flex;
flex-direction: row-reverse;
} 试一试» 相关页面
CSS教程： CSS显示和知名度
HTML DOM参考： display property