div 顯示與隱藏

最近寫項目用到DIV隱藏,以下引用http://www.cnblogs.com/dotLive/archive/2007/04/04/699302.html

visibility隱藏的對象還保留對象顯示時所佔的物理空間,display則不保留。可以保存下面的代碼看看效果:
具體步驟:
代碼示例:

<div style="border:1px solid #000;background:#eee">
<span style="width:200;height:200;visibility:hidden"></span>
←SS屬性爲visibility:hidden的對象
</div><br>
<div style="border:1px solid #000;background:#666">
<span style="width:200;height:200;display:none"></span>
←SS屬性爲display:none的對象
</div>

 特別提示
       用visibility屬性控制隱藏的對象還佔據着它顯示時的位置,而display則沒有。

特別說明

display屬性設置元素的顯示方式,對應腳本特性爲display,可選值爲none、block和inline,各值的說明如下:
none 隱藏元素,不保留元素顯示時的空間。
block塊方式顯示元素。
inline 以內嵌方式顯示元素。
inline-block對象顯示爲內嵌元素,但所有子對象都顯示爲塊元素,相鄰的內嵌元素將顯示在同一行,允許空格。
list-item 將塊元素顯示爲列表對象,並可以添加項目標點。(需要IE6.0+支持)
table-header-group 將元素作爲表格標題組顯示,相當於tHead元素。
table-footer-group 將元素作爲表格腳註組顯示,相當於tFoot元素。
visibility屬性設置是否顯示元素,對應的腳本特性爲visibility,可選值爲inherit、hidden和visible,各值的說明如下:
inherit 繼承父元素的visibility屬性設置。
hidden 隱藏元素,但保留其所佔空間。
visible 顯示元素(默認值)。

發佈了34 篇原創文章 · 獲贊 20 · 訪問量 23萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章