HTML+CSS学习总结 Day01 使元素消失的几种方式

最新推荐文章于 2022-10-18 18:28:19 发布

皮皮陈Q

最新推荐文章于 2022-10-18 18:28:19 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_48310754/article/details/120824716

本文详细介绍了HTML和CSS中使元素消失的四种常见方法：display:none，元素完全消失并释放空间；visibility:hidden，元素隐藏但保留空间；opacity:0，实现透明隐藏；以及transform:scale(0,0)，通过缩放达到视觉隐藏效果，但元素仍占用空间。这些方法各有应用场景，适用于不同需求的元素隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ONE-完全消失

display:none

给元素设置display: none;后，元素会脱离文档流，它原本占据的空间会被其他元素占有，适用于元素完全消失

<style type="text/css">
			div{
				width: 100px;
				height: 100px;
			}
			.d1{
				background-color: aqua;
			}
			.d2{
				background-color: aquamarine;
				display: none;
			}
			.d3{
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="d1"></div>
		<div class="d2"></div>
		<div class="d3"></div>
	</body>

消失前

消失后

TWO-隐藏占位

visibility: hidden

visibility设置值:inherit(继承父级元素的属性)
visible(显示)
hidden(隐藏) 内容隐藏，但是空间位置还是保留

visibility英文单词的意思是“能见度，可见度”

在html里面，给元素设置visibility: hidden;后，元素会从页面中消失，但他它原本占据的空间会被保留，适用于希望元素隐藏又不影响页面布局的场景。

visibility:hidden，会被子元素继承，通过设置子元素visibility:visible来显示子元素。
visibility:hidden 不会触发它上面绑定的事件。
transition对于visibility是无效的。

<style type="text/css">
			div{
				width: 100px;
				height: 100px;
			}
			.d1{
				background-color: aqua;
			}
			.d2{
				background-color: aquamarine;
				/* visibility: hidden; */
			}
			.d3{
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="d1"></div>
		<div class="d2"></div>
		<div class="d3"></div>
	</body>

隐藏前
隐藏后

Three-透明度

opacity:0

opacity 透明度
是一种视觉隐藏，将元素变得透明

transition对于opacity是有效。

		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
			}
			.d1{
				background-color: aqua;
				opacity: 0;
			}
			.d2{
				background-color: aquamarine;
				opacity: 0.5;
			}
			.d3{
				background-color: pink;
				opacity: 1;
			}
		</style>
	</head>
	<body>
		<div class="d1"></div>
		<div class="d2"></div>
		<div class="d3"></div>
	</body>

Fore-放大缩小

transform: scale(0,0)

		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
			}
			.d1{
				background-color: aqua;
			}
			.d2{
				background-color: aquamarine;
				transform: scale(0,0);
			}
			.d3{
				background-color: pink;
			}
		</style>