display CSS屬性指定由元素生成的框的類型。
下表為此屬性的用法說明和版本歷史記錄,以及該屬性在javascript腳本中的使用語法。
默認(rèn)值: | inline |
---|---|
適用于: | 所有元素 |
繼承: | 沒有 |
可動畫制作: | 否。請參見 動畫屬性。 |
版本: | CSS 1,2,3 |
JavaScript 語法: | object.style.display="block" |
該屬性的語法如下:
display: inline | block | contents | flex | flow | flow-root | grid | inline-block | inline-flex | inline-grid | inline-table | list-item | run-in | table | table-caption | table-column-group | table-header-group | table-footer-group | table-row-group | table-cell | table-column | table-row | none | initial | inherit
下面的示例演示了如何使用display屬性。
div { display: inline; } span { display: block; }測試看看?/?
下表描述了此屬性的值。
值 | 描述 |
---|---|
inline | 元素生成一個內(nèi)聯(lián)級別的框。 |
block | 元素生成一個塊級框。 |
contents | 元素本身不生成任何框,但是其子元素和偽元素生成框,并且文本正常運(yùn)行。 |
flex | 元素生成一個塊級的伸縮容器box。 |
flow | 元素使用流布局(塊和內(nèi)聯(lián)布局)布局其內(nèi)容。 |
flow-root | 元素生成一個塊容器框,并使用流布局對內(nèi)容進(jìn)行布局。 |
grid | 該元素生成一個塊級網(wǎng)格容器框。 |
inline-block | 元素生成一個塊框,該塊框的布局就好像它是嵌入式框一樣。 |
inline-flex | 元素生成一個內(nèi)聯(lián)級別的伸縮容器框。 |
inline-grid | 元素生成一個內(nèi)聯(lián)級別的網(wǎng)格容器框。 |
inline-table | 該元素的行為就像是一張表,就像是一個內(nèi)聯(lián)框一樣。 |
list-item | 元素為內(nèi)容生成一個塊框,為列表標(biāo)記生成一個單獨(dú)的內(nèi)聯(lián)框。 |
run-in | 該元素根據(jù)上下文生成一個塊或一個內(nèi)聯(lián)框。 |
table | 該元素的行為類似于<table>HTML元素。 |
table-caption | 該元素的行為類似于<caption>HTML元素。 |
table-column-group | 該元素的行為類似于<colgroup>HTML元素。 |
table-header-group | 該元素的行為類似于<thead>HTML元素。 |
table-footer-group | 該元素的行為類似于<tfoot>HTML元素。 |
table-row-group | 該元素的行為類似于<tbody>HTML元素。 |
table-cell | 該元素的行為類似于<td>HTML元素。 |
table-column | 該元素的行為類似于<col>HTML元素。 |
table-row | 該元素的行為類似于<tr>HTML元素。 |
none | 關(guān)閉元素的顯示。即使所有子元素的顯示屬性均設(shè)置為none,也將關(guān)閉其顯示。 |
initial | 將此屬性設(shè)置為其默認(rèn)值。 |
inherit | 如果指定,則關(guān)聯(lián)元素采用其父元素display的屬性值。 |
display屬性瀏覽器的兼容性,下表中的數(shù)字表示支持該屬性的瀏覽器最低版本號;所有主流瀏覽器均支持該屬性。
![]() |
|
警告:值,例如contents,flow-root,run-in等在大多數(shù)的瀏覽器支持不佳。您最好暫時避免使用它們。
請參考以下教程:CSS Display。
相關(guān)屬性:visibility,float,position。