元素的显示与隐藏

最新推荐文章于 2023-07-24 23:15:55 发布

时松

最新推荐文章于 2023-07-24 23:15:55 发布

阅读量161

点赞数

分类专栏：基础文章标签：元素的显示与隐藏

本文链接：https://blog.youkuaiyun.com/ice_yr/article/details/100023403

版权

基础专栏收录该内容

79 篇文章

订阅专栏

在css中有三个显示和隐藏的单词比较常见，我们要区分开，它们分别是display visibility和overflow
它们主要目的是让一个元素在页面中消失，但是不在文档源码中删除。最常见的是网站广告，当我们点击类似关闭不见了，但是我们重新刷新页面，它们又会出现和你玩躲猫猫！

display 显示（常用）

display 设置或检索对象是否及如何显示
display:none 隐藏对象与它相反的是display:block 除了转换为块级元素之外，同时还有显示元素的意思。
特点：隐藏之后，不再保留位置。

visibility 可见性

设置或检索是否显示对象
visible：对象可视
hidden：对象隐藏
特点：隐藏之后，继续保留原有位置。（停职留薪）

		div {
			width: 100px;
			height: 100px;
			background-color: pink;
		}
		div:first-child {
			/*display: block; */ /* 隐藏元素 不是删除 看不见了而已，但是元素一直存在页面中 但是不保留位置 block显示 */
			visibility: hidden; /* 隐藏元素 它和display最大的区别是它保留位置 visibility显示*/
		}
		
		div:last-child {
			background-color: purple;
		}

例子：鼠标经过显示二维码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="">
	div {
		width: 100px;
		height: 100px;
		background-color: blue;
		text-align: center; /*水平居中*/
		line-height: 100px;  /*文字居中*/
		margin: 100px auto;
		position: relative;  /*子绝父相*/
	}
	div img {
		position: absolute;
		left: 110px;
		top: 0;
		display: none;  /*隐藏二维码*/
	}
	div:hover img { /* 我们鼠标经过div的时候，里面的那个img图片会显示出来*/
		display: block;  /*显示元素  显示二维码*/
	}
	</style>
</head>
<body>
	<div>
	鼠标经过显示二维码
	<img src="ad-l.png" alt="">
	</div>
	
</body>
</html>

overflow 溢出

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
visible：不剪切内容也不添加滚动条
auto：超出自动显示滚动条，不超出不显示滚动条
hidden：不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll：不管超出内容否，总是显示滚动条

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="">
	div {
		width: 100px;
		height: 100px;
		border: 1px solid red;
		/*overflow: visible;  默认的超出显示*/
		/*overflow: auto;  自动超出就显示滚动条*/
		/*overflow: scroll;  一直显示滚动条*/
		overflow: hidden;    /*溢出隐藏用的最多的 */
	} 
	</style> 
</head>
<body>
	<div>
	111111
	1111111
	11111
	1111
    1111
	11111
	
	</div>
	
</body>
</html>