css display:none 和 visibility:hidden 的区别

最新推荐文章于 2024-04-06 23:07:09 发布

＊且听风吟

最新推荐文章于 2024-04-06 23:07:09 发布

阅读量259

点赞数

分类专栏： # CSS

本文链接：https://blog.csdn.net/HH18700418030/article/details/102730074

版权

CSS 专栏收录该内容

55 篇文章 5 订阅

订阅专栏

关于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>

在这里插入图片描述
如上图，当中间的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>