前端技巧CSS隐藏元素是用display还是visibility,两者的区别

CSS隐藏元素是用display还是visibility,两者的区别

在网页中如果要隐藏一部分内容的话,可以通过CSS的display:none属性和visibility:hidden属性来实现,很多人不明白这两者的区别,下面我们简单的举个示例来看看:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
body {margin:50px;}
.c1 {background:#68D3A9;height:80px;}
.c2 {display:none;height:80px;}
.c3 {background:#CA92E3;height:80px;}
</style>
</head>
<body>
<div class="c1">C1</div>
<div class="c2">C2</div>
<div class="c3">C3</div>
</body>
</html>

这个页面,我们把中间的区块设置了display:none隐藏,发现下方的区块占据了原本中间区块的位置,也就是说中间区块完全隐藏了,并且它不占据任何空间。

CSS隐藏1.png

下面我们用另一个隐藏属性试试:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
body {margin:50px;}
.c1 {background:#68D3A9;height:80px;}
.c2 {visibility:hidden;height:80px;}
.c3 {background:#CA92E3;height:80px;}
</style>
</head>
<body>
<div class="c1">C1</div>
<div class="c2">C2</div>
<div class="c3">C3</div>
</body>
</html>

我们发现中间的区块被隐藏了,可是它所占据的位置没有改变(仅仅是视觉上的隐藏),简单的说就是display:none隐藏不占空间,visibility:hidden隐藏占空间。

CSS隐藏2.png

这两个关于隐藏的定义还有一个区别就是当父级元素设置display:none隐藏,即使子级元素设置了display:block也不会显示,而如果父级设置了visibility:hidden隐藏,而子级设置visibility:visible时,子元素会显示出来,例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
body {margin:50px;}
.c1 {background:#68D3A9;height:80px;}
.c2 {visibility:hidden;height:80px;}
.c3 {background:#CA92E3;height:80px;}
h3 {visibility:visible;}
.c4 {display:none;height:80px;}
h5 {display:block;}
</style>
</head>
<body>
<div class="c1">C1</div>
<div class="c2"><h3>测试文字内容</h3></div>
<div class="c3">C3</div>
<div class="c4"><h5>测试文字内容</h5></div>
</body>
</html>

可以看到,c2父元素设置了visibility:hidden隐藏,但是子元素因为设置了visibility:visible所以能够显示,而c4父元素设置了display:none,即使子元素h5设置了display:block也不能显示。

CSS隐藏4.png

简单的说,也就是visibility可以分别设置父元素和子元素的隐藏属性,而display如果设置隐藏了父元素,则整个都消失…

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/skill/61.html