ello~~各位小伙伴，今天我們廣州藍景實訓部，繼續和大家分享前端技術干貨，CSS隱藏元素

總結出7種隱藏元素的辦法

1.CSS display的值是none。(該元素是不會在頁面上顯示的)

div{
    display: none;
}

2. type="hidden"的表單元素。(該元素是不會在頁面上顯示的)

3. 寬度和高度都顯式設置為0。(該元素會在頁面上顯示)

div{
    width: 0;
    height: 0;
}

4. 一個祖先元素是隱藏的，(該祖先以及祖先以下的元素是不會在頁面上顯示)

5. CSS visibility的值是hidden(該元素是會在頁面上顯示，還占原來的位置)

div{
    visibility: hidden;
}

6. CSS opacity的指數是0(該元素是會在頁面上顯示，還占原來的位置)

div{
    opacity: 0;
}

7. 將position設為absolute然后將位置設到不可見區域

div{
   position: absolute;
   top: -9999px;
   left: -9999px;
}

想要了解更多web前端開發技術資料，可在評論區留言！也可添加我們微信：philip_tan

錄

使用場景

display屬性

visibility 可見性

overflow 溢出

博主個人興趣

.元素的顯示與隱藏

display、visibility兩個屬性都可以實現元素的顯示與隱藏

（1.1）display:none;隱藏元素；

display:block;以塊級元素顯示；

（1.2）visibility:hidden;隱藏元素；

visibility:visibile;顯示元素；

display和visibility的區別在于，使用display屬性隱藏元素后，不再占據原先位置；而使用visibility屬性隱藏元素后，其原先位置仍被占據。

2.元素內容顯示與隱藏

overflow屬性會對溢出元素框的內容如何展示進行設置。

（2.1）overflow:visible;不做限制，保持原樣顯示，為默認值

（2.2）overflow:hidden;超出元素框的內容被隱藏

（2.3）overflow:scroll;添加滾動條，不管是否有內容溢出

（2.4）overflow:auto;當有內容溢出時，添加滾動條

3.元素顯示與隱藏的應用

制作遮罩效果。

實現思路：遮罩層默認為隱藏，當鼠標在元素上方時則顯示，鼠標不在元素上方時則隱藏。