visibility:hidden和display:none的区别

最新推荐文章于 2024-05-15 01:31:55 发布

clqxmt

最新推荐文章于 2024-05-15 01:31:55 发布

阅读量195

点赞数

分类专栏： CSS 文章标签： visibility:hidden和display:none的区别

本文链接：https://blog.csdn.net/weixin_43755513/article/details/97529331

版权

CSS 专栏收录该内容

68 篇文章 0 订阅

订阅专栏

visibility:hidden和display:none的区别

都可以实现隐藏
visibility:hidden内容会隐藏但是位置会保留
display:none内容会被隐藏但是不保留位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.div1{width:100px; height:100px; background:#f00;}
			.div2{width:100px; height:100px; background:#ff0; display:none;}
			.div3{width:100px; height:100px; background:#0f0;}
			
			.div4{width:100px; height:100px; background:#f00;}
			.div5{width:100px; height:100px; background:#ff0; visibility:hidden;}
			.div6{width:100px; height:100px; background:#0f0;}
		</style>
	</head>
	<body>
		dispaly隐藏
		<div class="div1">1</div>
		<div class="div2">2</div>
		<div class="div3">3</div>
		
		<br /><br />
		
		visibility隐藏
		<div class="div4">4</div>
		<div class="div5">5</div>
		<div class="div6">6</div>
	</body>
</html>

在这里插入图片描述