更多"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