网页元素的显示与隐藏。
很多网页的侧边栏都会出现广告，我们点击关闭时，广告会消失不见，但若重新刷新网页页面，则广告会重新出现。网页的广告并非是真的被删除了，而是被暂时的隐藏起来了。
• 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>