元素的显示和隐藏
- display:none; 隐藏元素 ,不再占有原来的位置
转换为块级元素 display: block(也表示显示元素)
转换为行内元素 display: inline
转换为行内块元素 display: inline-block
- visibility:hidden; 隐藏元素后，仍占据原本有的位置。
- overflow:hidden; 溢出显示隐藏，只对溢出部分处理
overflow:visible;
overflow:scroll;(溢出部分显示滚动条，不溢出部分也显示滚动条)
overflow:auto;(溢出部分显示滚动条，不溢出部分不显示滚动条)
一般情况下，常用hidden; 若有定位的盒子，请慎用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>
</head>
<style>
.tudo{
position: relative;
width: 300px;
height: 200px;
background-color: antiquewhite;
margin: 30px autoS;
}
.tudo 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(2.png) no-repeat center;
}
/* 当我们鼠标经过了 土豆这个盒子 就让里面的遮罩层显示出来 */
.tudo:hover .mask{
/* 显示元素 */
display: block;
}
</style>
<body>
<div class="tudo">
<div class="mask"></div>
<img src="1.png" alt="">
</div>
</body>
</html>
