元素的顯示與隱藏

類似網站廣告，當我們點擊關閉就不見了，但是我們重新刷新頁面，會重新出現！

本質：讓一個元素在頁面中隱藏或者顯示出來。

1. display 顯示

2. visibility 可見性

3. overflow 溢出顯示隱藏

display

display 屬性用於設置一個元素應如何顯示。

• display: none; 隱藏對象
• display：block ;除了轉換為塊級元素之外，同時還有顯示元素的意思

display:none可以隱藏某個元素，且隱藏的元素不會占用任何空間。

也就是說，該元素不但被隱藏了，而且該元素原本占用的空間也會從頁面布局中消失

應用及其廣泛，搭配 JS 可以做很多的網頁特效。類似網站廣告，當我們點擊關閉就不見了，但是我們重新刷新頁面，會重新出現！

visibility 可見性

• visibility：visible; 可視
• visibility：hidden; 隱藏

visibility:hidden可以隱藏某個元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響布局。

overflow 溢出

overflow 屬性用於控制內容溢出元素框時顯示的方式

值	描述
visible	默認值。內容不會被修剪，會呈現在元素框之外。
hidden	內容會被修剪，並且其余內容是不可見的。
scroll	內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。
auto	如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。
inherit	規定應該從父元素繼承 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" alt="">
        <div class="mask"></div>
    </div>