CSS display屬性基本特性和語(yǔ)法
本文和大家重點(diǎn)討論一下CSS display屬性的用法，主要包括基本特征，基本語(yǔ)法，語(yǔ)法的取值等內(nèi)容，這個(gè)屬性用于定義建立布局時(shí)元素生成的顯示框類型。對(duì)于 HTML 等文檔類型，如果使用 CSS display屬性 不謹(jǐn)慎會(huì)很危險(xiǎn)，可能違反 HTML 中已經(jīng)定義的顯示層次結(jié)構(gòu)。
CSS display屬性基本特性
初始值： inline 適用于： 所有元素
繼承性： 無(wú) 百分比： N/A
媒體： all 版本： CSS1/CSS2
兼容性： IE4+ NS4+
CSS display屬性基本語(yǔ)法
display : block | none | inline | compact | marker | inline-table | list-item | run-in | table | table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group
CSS display屬性語(yǔ)法取值
block : CSS1 塊對(duì)象的默認(rèn)值。將對(duì)象強(qiáng)制作為塊對(duì)象呈遞，為對(duì)象之后添加新行
none : CSS1 隱藏對(duì)象。與 visibility 屬性的hidden值不同，其不為被隱藏的對(duì)象保留其物理空間
inline : CSS1 內(nèi)聯(lián)對(duì)象的默認(rèn)值。將對(duì)象強(qiáng)制作為內(nèi)聯(lián)對(duì)象呈遞，從對(duì)象中刪除行
inline-block : IE5.5 將對(duì)象呈遞為內(nèi)聯(lián)對(duì)象，但是對(duì)象的內(nèi)容作為塊對(duì)象呈遞。旁邊的內(nèi)聯(lián)對(duì)象會(huì)被呈遞在同一行內(nèi)
compact : CSS2 未支持。分配對(duì)象為塊對(duì)象或基于內(nèi)容之上的內(nèi)聯(lián)對(duì)象
marker : CSS2 未支持。指定內(nèi)容在容器對(duì)象之前或之后。要使用此參數(shù)，對(duì)象必須和 :after 及 :before 偽元素一起使用
inline-table : CSS2 未支持。將表格顯示為無(wú)前后換行的內(nèi)聯(lián)對(duì)象或內(nèi)聯(lián)容器
list-item : CSS2 將塊對(duì)象指定為列表項(xiàng)目。并可以添加可選項(xiàng)目標(biāo)志
run-in : CSS2 未支持。分配對(duì)象為塊對(duì)象或基于內(nèi)容之上的內(nèi)聯(lián)對(duì)象
table : CSS2 未支持。將對(duì)象作為塊元素級(jí)的表格顯示
table-caption : CSS2 未支持。將對(duì)象作為表格標(biāo)題顯示
table-cell : CSS2 未支持。將對(duì)象作為表格單元格顯示
table-column : CSS2 未支持。將對(duì)象作為表格列顯示
table-column-group : CSS2 未支持。將對(duì)象作為表格列組顯示
table-header-group : CSS2 將對(duì)象作為表格標(biāo)題組顯示
table-footer-group : CSS2 將對(duì)象作為表格腳注組顯示
table-row : CSS2 未支持。將對(duì)象作為表格行顯示
table-row-group : CSS2 未支持。將對(duì)象作為表格行組顯示 #p#
CSS display屬性使用說(shuō)明
設(shè)置或檢索對(duì)象是否及如何顯示。
對(duì)于下列元素來(lái)說(shuō)，此屬性的默認(rèn)值為 block ： ADDRESS QUOTE BODY XMP CENTER COL COLGROUP DD DIR DIV DL DT FIELDSET FORM Hn HR IFRAME LEGEND LISTING MARQUEE MENU OL P PLAINTEXT PRE TABLE TD TH TR UL
對(duì)于下列元素來(lái)說(shuō)，此屬性的默認(rèn)值為 none ： BR FRAME nextID TBODY TFOOT THEAD
對(duì)于下列元素來(lái)說(shuō)，此屬性的默認(rèn)值為 list-item ： LI
其他元素默認(rèn)值都是 inline 。
在IE6.0以前的版本中， LI 對(duì)象的默認(rèn)值為 block 。
在IE4.0中， block ， inline ， list-item 值不被支持。但是對(duì)象仍然會(huì)被呈遞。
在IE5.0中開始支持 block 和 inline 。
在IE5.5中開始支持 inline-block 。你可以使用 inline-block 使對(duì)象獲得布局而無(wú)需指定確切的高( height )和寬( width )。
在IE6.0中開始支持 list-item 。
所有可視的文檔對(duì)象都是塊對(duì)象(block element)或者內(nèi)聯(lián)對(duì)象(inline element)。例如， div 是一個(gè)塊對(duì)象。 span 是一個(gè)內(nèi)聯(lián)對(duì)象。塊對(duì)象的特征是從新的一行開始且能包含其他塊對(duì)象和內(nèi)聯(lián)對(duì)象。內(nèi)聯(lián)對(duì)象被呈遞時(shí)不會(huì)從新行開始，能夠包含其他內(nèi)聯(lián)對(duì)象和數(shù)據(jù)。
改變此屬性值對(duì)其周圍內(nèi)容布局的影響可能是：
◆在屬性值設(shè)為 block 的對(duì)象后面添加新行。
◆從屬性值設(shè)為 inline 的對(duì)象中刪除一行。
◆隱藏屬性值設(shè)為 none 的對(duì)象并釋放其在文檔中的物理空間。
table-header-group 和 table-footer-group 屬性值可用來(lái)指定當(dāng)表格( table )跨越了多頁(yè)時(shí)， tHead 和 tFoot 對(duì)象的內(nèi)容在每一頁(yè)都顯示。
此屬性對(duì)于 currentStyle 對(duì)象而言是只讀的。對(duì)于其他對(duì)象而言是可讀寫的。對(duì)應(yīng)的腳本特性為display。
【編輯推薦】
- CSS display屬性定義和用法
- 探究CSS hack使用原理 規(guī)則及弊端
- 探究CSS display屬性用法
- CSS屬性display:inline-block使用揭秘
- CSS hack:實(shí)現(xiàn)IE6、IE7、Firefox兼容
