当前位置：首页 > news >正文

CSS之网页元素的显示与隐藏（旧土豆网遮罩案例）

news 来源：原创 2025/5/20 7:06:29

网页元素的显示与隐藏。

很多网页的侧边栏都会出现广告，我们点击关闭时，广告会消失不见，但若重新刷新网页页面，则广告会重新出现。网页的广告并非是真的被删除了，而是被暂时的隐藏起来了。

• display

• visibility

• overflow

一、display

display：none；隐藏元素

display: block；除了将元素转化为块内元素外，还有让元素显示出来的意思

display元素被隐藏后不再占有原来的元素的位置

// 不重要的代码块
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><style>.peppa {display: none;width: 200px;height: 200px;background-color: pink;}.gorge {width: 200px;height: 200px;background-color: aqua;}</style>
<body><div class="peppa">佩奇</div><div class="gorge">
乔治</div>
</body>
</html>

二、visibility

visilibity: inherit(继承上一个父亲对象的可见性) | hidden(隐藏) | visible(可见)

注意⚠️：隐藏后仍然会占有原先的位置

三、overflow

对溢出的元素进行隐藏

overflow：visible

overflow：hidden

overflow：scroll(溢出的部分显示滚动条）

overflow：auto（在需要的时候添加滚动条）

四、旧土豆网网页制作

效果演示：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>.tudou {position: relative;height: 320px;width: 444px;background-color: pink;margin: 30px auto;}.tudou img {width: 100%;height: 100%;}.mask {/* 隐藏遮罩层 */display: none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;}/* 当鼠标经过盒子时，就让遮罩层显示出来 */.tudou:hover .mask{display: block;}
</style><body><div class="tudou"><div class="mask"></div><img src="images/tudou.jpg" alt=""></div>
</body></html>