元素的显示与隐藏
类似网站广告, 当我们点击关闭就不见了, 但是我们重新刷新页面, 会重新出现
本质: 让一个元素在页面中隐藏或者显示出来
1. display显示隐藏
- display属性用于设置一个元素应如何显示
display: none;
隐藏对象display: block;
除了转换为块级元素之外, 同时还有显示元素的意思
display隐藏元素后, 不再占有原来的位置
应用极为广泛, 搭配js可以做很多网页特效
2. visibility显示隐藏
visibility属性用于指定一个元素应可见还是隐藏
visibility: visible;
元素可见visibility: hidden;
元素隐藏
visibility隐藏元素后, 继续占有原来的位置
如果隐藏元素想要原来位置, 就用visibility: hidden;
如果隐藏元素不想要原来位置, 就用display: none;
(用处更多 重点)
3. overflow溢出显示隐藏
overflow属性指定了如果内容一处一个元素的框(超过其指定的高度及宽度)时, 会发生什么
属性值 | 描述 |
---|---|
visible | 不剪切内容也不添加滚动条 |
hidden | 不显示超过对象尺寸的内容, 超出的部分隐藏掉 |
scroll | 不管超出内容否, 总是显示滚动条 |
auto | 超出自动显示滚动条, 不超出不显示滚动条 |
一般情况下, 我们都不想让溢出的的内容显示出来, 因为溢出的部分会影响布局
但是如果有定位的盒子, 请慎用overflow: hidden; 因为它会隐藏多余的部分
.box {
position: relative;
width: 64px;
height: 64px;
background-color: aliceblue;
margin: 100px auto;
text-align: center;
}
.box .mask {
display: none;
position: absolute;
height: 100%;
width: 100%;
background-color: rgba(10, 88, 177, 0.4);
background-image: url(images/png/6.png);
background-repeat: no-repeat;
background-position: center center;
}
.box:hover .mask {
display: block;
}
上面.box:hover .mask
是鼠标放到box盒子上, 让盒子里面的mask显示出来, 注意写法