本质：让一个元素在页面中隐藏或者显示出来。
- display 显示隐藏
- visibility 显示隐藏
- overflow 溢出显示隐藏
display 属性
- none 隐藏对象
- block 除了转换为块级元素之外，同时还有显示元素的意思
display 隐藏元素后，不再占有原来的位置
visibility
隐藏后继续占有原来位置
如果有定位的盒子，慎用overflow:hidden 因为它会隐藏多余的部分
测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素显示与隐藏</title>
<style>
.cc{
background-color: red;
width: 200px;
height: 100px;
}
/* 不显示超出尺寸的内容 */
.hid{
margin-top: 100px;
overflow: hidden;
background-color: blue;
width: 200px;
height: 100px;
}
/* 总是显示滚动条 */
.sc{
overflow: scroll;
background-color: green;
width: 200px;
height: 100px;
}
/* 在超出尺寸后才显示滚动条 */
.au{
overflow: auto;
background-color: yellow;
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<div class="cc">
哦；阿上飞机哦屁啊文件s警匪片饿啊警方破阿额外积分啊喂警方破了阿尔减肥了；‘oases就佛i怕受过哈是豆腐干哈饿我；哦公司的分公司担任过生日的各色的人格是热的给
</div>
<div class="hid">
哦；阿上飞机哦屁啊文件s警匪片饿啊警方破阿额外积分啊喂警方破了阿尔减肥了；‘oases就佛i怕受过哈是豆腐干哈饿我；哦公司的分公司担任过生日的各色的人格是热的给
</div>
<div class="sc">
哦；阿上飞机哦屁啊文件s警匪片饿啊警方破阿额外积分啊喂警方破了阿尔减肥了；‘oases就佛i怕受过哈是豆腐干哈饿我；哦公司的分公司担任过生日的各色的人格是热的给
</div>
<div class="au">
哦；阿上飞机哦屁啊文件s警匪片饿啊警方破阿额外积分啊喂警方破了阿尔减肥了；‘oases就佛i怕受过哈是豆腐干哈饿我；哦公司的分公司担任过生日的各色的人格是热的给
</div>
</body>
</html>
结果演示
综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>综合案例</title>
<style>
.box{
position: relative;
width: 400px;
height: 200px;
}
img{
width: 100%;
height: 100%;
}
.mask{
position: absolute;
width: 100%;
height: 100%;
}
.mask:hover{
background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;
}
</style>
</head>
<body>
<div class="box">
<div class="mask"></div>
<img src="images/tudou.jpg">
</div>
</body>
</html>
结果演示
