摘要: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還是會占用正常顯示時該有的空間 , 只是讓整個元素完全透明
