Display:none 與 Visibility:hidden 的不同

2013-07-28

1221
0
Css
2013-08-13

摘要:Display:none 與 Visibility:hidden 的不同

Css 中的 Display:none 與 Visibility:hidden 同樣都是可以控制html元素的隱藏 ,

可是其中卻有很大的差別 , 以下使用兩個Div元素來說明 ,

	
					1
				
					<div id="display" style="background-color:Black;width:400px;height:300px;"></div>

2

	
					3
				
					<div id="visibility" style="background-color:Blue;width:400px;height:300px;"></div>

上述的html會產生下圖 :

我們開始將黑色Div元素設定 display:none

	
					1
				
					<div id="display" style="background-color:Black;width:400px;height:300px;display:none"></div>

2

	
					3
				
					<div id="visibility" style="background-color:Blue;width:400px;height:300px;"></div>

產生下圖: 黑色Div消失, 而藍色Div則跑到原本黑色Div的位置

我們再嘗試修改黑色Div元素 , 設定為 visibility: hidden

<div id="display" style="background-color:Black;width:400px;height:300px; visibility:hidden"></div>

<div id="visibility" style="background-color:Blue;width:400px;height:300px;"></div>

產生下圖 :

藍色Div不像第一次一樣移動到黑色Div的位置 , 反而是還在原本的位置

結論 :

display:none 和 visibility 都可以用來控制元素顯示與否 , 其中的差異是 ,

display:none不會占用任何空間 , 就像那個元素從來不存在一樣 ,

visibility:hidden還是會占用正常顯示時該有的空間 , 只是讓整個元素完全透明

回首頁