css display:none 和 visibility:hidden 的区别

关于display:none 和 visibility:hidden 的区别,自己做了两个小例子:

<!DOCTYPE html>
<html>
<head>
	<title>display:none和visibility:hidden的区别</title>
</head>
<style type="text/css">
	*{
		padding:0;
		margin:0;
	}
	.test{
		width: 600px;
		height: 600px;
		margin: 100px;
	}	
	.test00{
		width: 100px;
		height: 100px;
		background-color: #72CCE4;
	}
	.test02{
		width: 100px;
		height: 100px;
		background-color: #ccc;
	}
	.test01 {	
		width: 100px;
		height: 100px;
		background-color: red;
		display: none;
	}
</style>
<body>
	<div class="test">
		<div class="test00">
		</div>
		<div class="test01">
		</div>
		<div class="test02">
		</div>
	</div>
</body>
</html>

css display:none 和 visibility:hidden 的区别_第1张图片
如上图,当中间的div设置为display: none;时,元素被隐藏,既不占据空间也不会影响布局。

<!DOCTYPE html>
<html>
<head>
	<title>display:none和visibility:hidden的区别</title>
</head>
<style type="text/css">
	*{
		padding:0;
		margin:0;
	}
	.test{
		width: 600px;
		height: 600px;
		margin: 100px;
	}	
	.test00{
		width: 100px;
		height: 100px;
		background-color: #72CCE4;
	}
	.test02{
		width: 100px;
		height: 100px;
		background-color: #ccc;
	}
	.test01 {	
		width: 100px;
		height: 100px;
		background-color: red;
		visibility: hidden;
	}
</style>
<body>
	<div class="test">
		<div class="test00">
		</div>
		<div class="test01">
		</div>
		<div class="test02">
		</div>
	</div>
</body>
</html>

css display:none 和 visibility:hidden 的区别_第2张图片
当中间的div设置为visibility: hidden;时,元素只是视觉上被隐藏,会占据空间也会影响布局。

1.display:none不占空间,浏览器也不会解析该元素,当diaplay值为none时会产生回流和重绘。
2.visibility:hidden 只是看不到了,但占有相对空间,不会彻底消失,浏览器会解析该元素,只重绘不回流。

你可能感兴趣的:(前端)