元素的显示与隐藏

类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！

本质：让一个元素在页面中隐藏或者显示出来。

1. display 显示

2. visibility 可见性

3. overflow 溢出显示隐藏

display

display 属性用于设置一个元素应如何显示。

• display: none; 隐藏对象
• display：block ;除了转换为块级元素之外，同时还有显示元素的意思

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。

也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失

应用及其广泛，搭配 JS 可以做很多的网页特效。类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！

visibility 可见性

• visibility：visible; 可视
• visibility：hidden; 隐藏

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

overflow 溢出

overflow 属性用于控制内容溢出元素框时显示的方式

案例

鼠标放入盒子区域时遮盖盒子

 <style>
        .tudou {
            position: relative;
            width: 444px;
            height: 320px;
            margin: 30px auto;
        }

        .tudou 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("images/arr.png") no-repeat center;
        }

        .tudou:hover .mask {
            display: block;
        }
    </style>

 <div class="tudou">
        <img src="images/tudou.jpg" >
        <div class="mask"></div>
    </div>

元素的显示与隐藏