【web前端(二十一)】html_盒子的显示和隐藏

最新推荐文章于 2025-05-26 19:32:20 发布

原创最新推荐文章于 2025-05-26 19:32:20 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

Java 专栏收录该内容

118 篇文章

订阅专栏

本文详细解析了CSS中display和visibility属性的使用技巧，通过具体示例对比了两种方式在网页布局中的效果差异，帮助读者理解如何有效控制元素的可见性。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>盒子的显示和隐藏</title>
		<style>
			
			.c1{
				width: 100px;
				height: 100px;
				background-color: #0000FF;
				
			}
			
			.c2{
				width: 100px;
				height: 100px;
				background-color: #124444;
				/*刷新之后，虽然块还在，
				 * 但是在实际流里面我们就看不到了，
				 * 因为是动态的
				*/
				display:none;
				
				/*visibility与display的区别在于，
				 虽然在窗口没有该块了，
				 但是位置还在*/
				/*visibility: hidden;*/
				
			}
			
			.c3{
				width: 100px;
				height: 100px;
				background-color: #8A2BE2;
			}

		</style>
	</head>
	<body>
		<div class="c1">
		
		</div>
		
		<div class="c2">
				
		</div>
		
		<div class="c3">
				
		</div>
	</body>
</html>