display:none 和 visibility:hidden 区别小结

最新推荐文章于 2024-06-05 00:48:32 发布

Haikin Tei

最新推荐文章于 2024-06-05 00:48:32 发布

阅读量412

点赞数 2

文章标签： css html

本文链接：https://blog.csdn.net/qq_42683507/article/details/115542585

版权

display:none 和 visibility:hidden

这两个方法一般都常用于前端的页面编写的布局上。
但是根据不同的业务需求还是有不一样的使用特点

区别1：
如果给一个元素设置了display: none，那么该元素以及它的所有后代元素都会隐藏；
给元素设置visibility: hidden也可以隐藏这个元素，但是隐藏元素仍需占用与未隐藏时一样的空间，也就是说虽然元素不可见了，但是仍然会影响页面布局。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>
			display：none和visibility：hidden的区别
		</title>
		<style type="text/css">
			.display{
				background-color: #7FFF00;
				width: 500px;
				height: 300px;
				display: none;
			}
			.visibility{
				background-color: #FF69B4;
				width: 600px;
				height: 300px;
				visibility: hidden;
			}
		</style>
	</head>
	<body>
		<div class="display">用于显示display的展示
		<ul>
			<li>display:1</li>
			<li>display:2</li>
			<li>display:3</li>
			<li>display:4</li>
		</ul>
		</div>
		<div class="visibility">用于visibility的展示
		<ul>
			<li>visibility:1</li>
			<li>visibility:2</li>
			<li>visibility:3</li>
			<li>visibility:4</li>
		</ul>
		</div>
	</body>
</html>

虽然都在页面上消失了，但是display的消失，连同所在的布局区域都消失了。但是visibility：hidden 依然还会在页面中保留相关的布局空间。

区别2：
visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别

区别3：
visibility: hidden不会影响计数器的计数，如图所示，visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行。这和display: none完全不一样

Haikin Tei

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
display:none 和 visibility:hidden 区别小结

display:none 和 visibility:hidden这两个方法一般都常用于前端的页面编写的布局上。但是根据不同的业务需求还是有不一样的使用特点区别1：如果给一个元素设置了display: none，那么该元素以及它的所有后代元素都会隐藏；给元素设置visibility: hidden也可以隐藏这个元素，但是隐藏元素仍需占用与未隐藏时一样的空间，也就是说虽然元素不可见了，但是仍然会影响页面布局。<!DOCTYPE html><html> <head&g
复制链接

扫一扫