CSS元素的显示和隐藏

最新推荐文章于 2024-08-20 21:00:21 发布

m0_45245319

最新推荐文章于 2024-08-20 21:00:21 发布

阅读量644

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/m0_45245319/article/details/118144105

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了HTML中控制元素显示和隐藏的三种主要方法：display、visibility和overflow属性。通过实例展示了它们的区别，display:none;会移除元素占用的空间，而visibility:hidden;则保留其位置。overflow属性用于控制内容溢出时的行为。读者可以通过实践代码来体验这些效果。

摘要由CSDN通过智能技术生成

导语：元素的显示和隐藏，主要有三种方式：

元素的显示和隐藏就像我们打开网页的时候右下角弹出的广告一样，当你点击X过后广告就关闭，但是当你刷新页面的时候，广告就又重新出现在页面上，这就是元素的显示和隐藏，当你点击X的时候并不是真正意义上的把广告删除而是把广告隐play

1.display

display:none;隐藏元素，但是隐藏元素后，不在占有原来的位置

display:block;显示元素，同时还有把其他样式的标签转换位块级元素的作用

实战

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<div id="d">
		<span id="s">
			X
		</span>
	
	</div>
	</body>
	<style>
		div{
			background-color: aliceblue;
			height: 100px;
			width: 100px;
			position: relative;
		}
		div>span{
			height: 20px;
			width: 20px;
			position:absolute;
			top: 0px;
			left: 0px;
			background-color: bisque;
		}
	</style>
	<script>
		var span=document.querySelector('#s');
		var d=document.querySelector('#d');
		span.addEventListener('click',function(){
			d.style.display='none'
		})
		
	</script>
</html>

该代码实现了一个类似于广告弹窗的样式

2.visibility

该属性和上面讲到的display类似，唯一的不同就是display隐藏的元素，隐藏过后不在占有原来的位置，但是visibility隐藏元素以后占有原来的位置，各位小伙伴可以自己尝试一下。

visibility:hidden;隐藏元素，元素被隐藏了过后，依旧保留原来的位置。

visibility:visible;显示元素

实战

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<div id="d">
		<span id="s">
			X
		</span>
	
	</div>
	<p>
		123
	</p>
	</body>
	<style>
		div{
			background-color: aliceblue;
			height: 100px;
			width: 100px;
			position: relative;
		}
		div>span{
			height: 20px;
			width: 20px;
			position:absolute;
			top: 0px;
			left: 0px;
			background-color: bisque;
		}
	</style>
	<script>
		var span=document.querySelector('#s');
		var d=document.querySelector('#d');
		span.addEventListener('click',function(){
			d.style.visibility='hidden'
		})
		
	</script>
</html>

3.overflow溢出内容的显示和隐藏

overflow的特性

实战

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<div id="d">
		ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
		ddddddddddddddddddddddddddddddddddddddssssssss
		<span id="s">
			X
		</span>
	
	</div>
	<p>
		123
	</p>
	</body>
	<style>
		div{
			background-color: aliceblue;
			height: 100px;
			width: 100px;
			position: relative;
		}
		div>span{
			height: 20px;
			width: 20px;
			position:absolute;
			top: 0px;
			left: 0px;
			background-color: bisque;
		}
	</style>
	<script>
		var span=document.querySelector('#s');
		var d=document.querySelector('#d');
		span.addEventListener('click',function(){
			//d.style.overflow='hidden'
			//d.style.overflow='scroll'
			d.style.overflow='auto'
		})
		
	</script>
</html>

想自己看效果的同学可以把代码运行一下，就可以看到效果，毕竟实践出真知