12 css元素显示与隐藏

元素的显示与隐藏

类似网站广告, 当我们点击关闭就不见了, 但是我们重新刷新页面, 会重新出现
本质: 让一个元素在页面中隐藏或者显示出来

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显示出来, 注意写法