display:
display: none 隐藏后不占有原来的位置
display:block 也有显示元素的意思
visibility:
hidden 隐藏 ;(隐藏后继续占有原来的位置)
visible 显示;
inherit 继承父对象的可见性。
overflow:
visible 默认 显示溢出部分
hidden 隐藏溢出部分
scroll 溢出的部分显示滚动条
auto 有溢出内容时显示滚动条,没有溢出时不显示滚动条
有position定位的盒子要慎用溢出隐藏
案例:
模拟视频播放软件,鼠标悬停在图片上时,显示可以点击播放的按钮,离开时恢复正常图片。
<style>
.box4 {
position: relative;
width: 450px;
height: 255px;
}
.box4 img {
position: absolute;
width: 100%;
height: 100%;
}
.mask{
display: none;
/* 多个有position的盒子,后面写的在最上面(后来居上),mask会在img之上 */
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .3);
}
.box5 {
display: none;
position: absolute;
left: 50%;
margin-left: -25px;
top: 50%;
margin-top