1.display
display: none ；隐藏对象
display：block ；除了转换为块级元素之外，同时还有显示元素的意思
display 隐藏元素后，不再占有原来的位置。
2.visibility
visibility
属性用于指定一个元素应可见还是隐藏。
visibility：visible ; 元素可视
visibility：hidden; 元素隐藏
visibility 隐藏元素后，继续占有原来的位置
3.overflow
overflow
属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度） 时，会发生什么。
4.土豆网案例
核心原理：
原先半透明的黑色遮罩看不见， 鼠标经过 大盒子，就显示出来。
遮罩的盒子不占有位置， 就需要用绝对定位 和 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>
<style>
.todou {
position: relative;
width: 520px;
height: 600px;
background-color: pink;
margin: 30px auto;
}
.todou img {
width: 100%;
height: 100%;
}
.mask {
position: absolute;
display: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:rgba(0, 0, 0, .4) url(arr.png) no-repeat center;
}
.todou:hover .mask{
display: block;
}
</style>
</head>
<body>
<div class="todou">
<div class="mask"></div>
<img src="img.jpg" alt="">
</div>
</body>
</html>
扫一扫
3422
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
