本文和大家重點(diǎn)討論一下CSS display屬性的用法，主要包括基本特征，基本語法，語法的取值等內(nèi)容，這個屬性用于定義建立布局時元素生成的顯示框類型。對于 HTML 等文檔類型，如果使用 CSS display屬性 不謹(jǐn)慎會很危險(xiǎn)，可能違反 HTML 中已經(jīng)定義的顯示層次結(jié)構(gòu)。

CSS display屬性基本特性

初始值： inline   適用于： 所有元素 
繼承性： 無       百分比： N/A 
 媒體：  all      版本： CSS1/CSS2 
兼容性： IE4+ NS4+   

CSS display屬性基本語法

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屬性語法取值

block               :　 CSS1  塊對象的默認(rèn)值。將對象強(qiáng)制作為塊對象呈遞，為對象之后添加新行
none                :　 CSS1  隱藏對象。與 visibility 屬性的hidden值不同，其不為被隱藏的對象保留其物理空間
inline              :　 CSS1  內(nèi)聯(lián)對象的默認(rèn)值。將對象強(qiáng)制作為內(nèi)聯(lián)對象呈遞，從對象中刪除行
inline-block        :　 IE5.5  將對象呈遞為內(nèi)聯(lián)對象，但是對象的內(nèi)容作為塊對象呈遞。旁邊的內(nèi)聯(lián)對象會被呈遞在同一行內(nèi)
compact             :　 CSS2  未支持。分配對象為塊對象或基于內(nèi)容之上的內(nèi)聯(lián)對象
marker              :　 CSS2  未支持。指定內(nèi)容在容器對象之前或之后。要使用此參數(shù)，對象必須和 :after 及 :before 偽元素一起使用
inline-table        :　 CSS2  未支持。將表格顯示為無前后換行的內(nèi)聯(lián)對象或內(nèi)聯(lián)容器
list-item           :　 CSS2  將塊對象指定為列表項(xiàng)目。并可以添加可選項(xiàng)目標(biāo)志
run-in              :　 CSS2  未支持。分配對象為塊對象或基于內(nèi)容之上的內(nèi)聯(lián)對象
table               :　 CSS2  未支持。將對象作為塊元素級的表格顯示
table-caption       :　 CSS2  未支持。將對象作為表格標(biāo)題顯示
table-cell          :　 CSS2  未支持。將對象作為表格單元格顯示
table-column        :　 CSS2  未支持。將對象作為表格列顯示
table-column-group  :　 CSS2  未支持。將對象作為表格列組顯示
table-header-group  :　 CSS2  將對象作為表格標(biāo)題組顯示
table-footer-group  :　 CSS2  將對象作為表格腳注組顯示
table-row           :　 CSS2  未支持。將對象作為表格行顯示
table-row-group     :　 CSS2  未支持。將對象作為表格行組顯示 #p#
    
CSS display屬性使用說明

設(shè)置或檢索對象是否及如何顯示。

對于下列元素來說，此屬性的默認(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
對于下列元素來說，此屬性的默認(rèn)值為 none ： BR FRAME nextID TBODY TFOOT THEAD
對于下列元素來說，此屬性的默認(rèn)值為 list-item ： LI
其他元素默認(rèn)值都是 inline 。
在IE6.0以前的版本中， LI 對象的默認(rèn)值為 block 。
在IE4.0中， block ， inline ， list-item 值不被支持。但是對象仍然會被呈遞。
在IE5.0中開始支持 block 和 inline 。
在IE5.5中開始支持 inline-block 。你可以使用 inline-block 使對象獲得布局而無需指定確切的高( height )和寬( width )。
在IE6.0中開始支持 list-item 。

所有可視的文檔對象都是塊對象(block element)或者內(nèi)聯(lián)對象(inline element)。例如， div 是一個塊對象。 span 是一個內(nèi)聯(lián)對象。塊對象的特征是從新的一行開始且能包含其他塊對象和內(nèi)聯(lián)對象。內(nèi)聯(lián)對象被呈遞時不會從新行開始，能夠包含其他內(nèi)聯(lián)對象和數(shù)據(jù)。

改變此屬性值對其周圍內(nèi)容布局的影響可能是：

◆在屬性值設(shè)為 block 的對象后面添加新行。
 
◆從屬性值設(shè)為 inline 的對象中刪除一行。

◆隱藏屬性值設(shè)為 none 的對象并釋放其在文檔中的物理空間。

table-header-group 和 table-footer-group 屬性值可用來指定當(dāng)表格( table )跨越了多頁時， tHead 和 tFoot 對象的內(nèi)容在每一頁都顯示。
此屬性對于 currentStyle 對象而言是只讀的。對于其他對象而言是可讀寫的。對應(yīng)的腳本特性為display。
 

【編輯推薦】

1. CSS display屬性定義和用法
2. 探究CSS hack使用原理 規(guī)則及弊端
3. 探究CSS display屬性用法
4. CSS屬性display:inline-block使用揭秘
5. CSS hack:實(shí)現(xiàn)IE6、IE7、Firefox兼容