码迷,mamicode.com
首页 > Web开发 > 详细

一段代码弄清楚CSS属性display和visibility的差别

时间:2015-01-29 19:41:14      阅读:179      评论:0      收藏:0      [点我收藏+]

标签:display和visibility   css可见性   

CSS如果想要将DOM元素隐藏,有2种做法:将display属性设置成none,或者将visibility属性设置成hidden。下面的html代码没有设置displayvisibility属性。

<div id="outA" style="width:400px; height:400px; background:#CDC9C9;position:relative;">
	<div id="outB" style="height:200; background:#0000ff;top:100px;position:relative;">
	</div>
	<div id="outC" style="height:100px; background:#FFB90F;top:50px;position:relative;">
	</div>
</div>


使用display:none隐藏outB

<div id="outA" style="width:400px; height:400px; background:#CDC9C9;position:relative;">
	<div id="outB" style="height:200; background:#0000ff;top:100px;position:relative;display:none;">
	</div>
	<div id="outC" style="height:100px; background:#FFB90F;top:50px;position:relative;">
	</div>
</div>

 

使用visibility:hidden隐藏outB

<div id="outA" style="width:400px; height:400px; background:#CDC9C9;position:relative;">
	<div id="outB" style="height:200; background:#0000ff;top:100px;position:relative;visibility:hidden;">
	</div>
	<div id="outC" style="height:100px; background:#FFB90F;top:50px;position:relative;">
	</div>
</div>

 

对比结果可以很容易得出结论:display:none,元素实际上就从页面中移走了,它后面的元素就会自动上移;而visibility:hidden,则仅仅隐藏该元素,它占据的页面空间依然存在。

 

对于outB元素,如果将displayvisibility组合使用会是什么结果呢?

display:block;visibility:hidden;   outB看不见,但仍然占页面空间。

display:none;visibility:hidden;   outB看不见,也不占页面空间。

display:none;visibility:visible;    outB看不见,不占有空间。

display:block;visibility:visible;    outB可见,肯定占有空间。

上面的测试结果,在IE11/FF17/Chrome39下表现都是一致的。

一段代码弄清楚CSS属性display和visibility的差别

标签:display和visibility   css可见性   

原文地址:http://blog.csdn.net/aitangyong/article/details/43273201

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!