細說HTML元素的隱藏和顯示

標籤：style   blog   color   使用   strong   html   

CSS文檔對HTML的顯示和隱藏有2個屬性可供選擇：

1、display

2、visiblity

這2個有什麼區別呢？

display：

display版本：CSS1/CSS2　 相容性：IE4+ NS4+　繼承性：有文法：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 取值：block  :　 CSS1  塊對象的預設值。將對象強製作為塊對象呈遞，為對象之後添加新行 none  :　 CSS1  隱藏對象。與 visibility 屬性的hidden值不同，其不為被隱藏的對象保留其物理空間 inline  :　 CSS1  內聯對象的預設值。將對象強製作為內聯對象呈遞，從對象中刪除行 inline-block  :　 IE5.5  將對象呈遞為內聯對象，但是對象的內容作為塊對象呈遞。旁邊的內聯對象會被呈遞在同一行內 list-item  :　 CSS2  將塊對象指定為清單項目。並可以添加可選項目標誌 /** 以下值未支援 **/compact  :　 CSS2  未支援。指派至為塊對象或基於內容之上的內聯對象 marker  :　 CSS2  未支援。指定內容在容器物件之前或之後。要使用此參數，對象必須和 :after 及 :before 虛擬元素一起使用 inline-table  :　 CSS2  未支援。將表格顯示為無前後換行的內聯對象或內聯容器 run-in  :　 CSS2  未支援。指派至為塊對象或基於內容之上的內聯對象 table  :　 CSS2  未支援。將對象作為塊元素級的表格顯示 table-caption  :　 CSS2  未支援。將對象作為表格標題顯示 table-cell  :　 CSS2  未支援。將對象作為表格儲存格顯示 table-column  :　 CSS2  未支援。將對象作為表格列顯示 table-column-group  :　 CSS2  未支援。將對象作為表格列組顯示 table-header-group  :　 CSS2  將對象作為表格標題組顯示 table-footer-group  :　 CSS2  將對象作為表格腳註組顯示 table-row  :　 CSS2  未支援。將對象作為表格行顯示 table-row-group  :　 CSS2  未支援。將對象作為表格行組顯示 

visibility：

visibility版本：CSS2　 相容性：IE4+ NS6+　繼承性：無文法：visibility : inherit | visible | collapse | hidden 取值：inherit  :　 預設值。繼承父物件的可見度 visible  :　 對象可視 hidden  :　 對象隱藏 collapse  :　 主要用來隱藏表格的行或列。隱藏的行或列能夠被其他內容使用。對於表格外的其他對象，其作用等同於 hidden。IE6及以下不支援此參數值

經過在IE、chrom、firfox中測試結果如下：

display的none會使被隱藏的對象釋放被佔用的空間

visibility的hidden不會使被隱藏的對象釋放被佔用的空間。

 

visibility的collapse在chrom下table並未釋放空間，在IE和firfox下釋放了。

 

翻閱了JQuery的show和hide方法的源碼，發現其控制元素顯示與否是通過display屬性來控制的。