HTML元素的隱藏方式

感謝原文作者：幼兒園中的小小白
原文鏈接：https://blog.csdn.net/weixin_43846130/article/details/95963426

一、元素的隱藏方式:

1.display:none;
    特點: 真正的隱藏元素。
        (1) 將元素的display屬性設置為none能夠確保元素不可見;
        (2) 使用這個屬性,被隱藏元素不占用任何空間;
        (3) 使用display:none隱藏元素,不能直接跟用戶進行交互操作
            (另外,使用讀屏軟件也不能讀取到元素的內容，這種隱藏方式就像元素完全不存在一樣)
        (4) 任何這個隱藏元素的后代元素也會被隱藏;
        (5) 但是，可以通過JS中的DOM操作訪問到這個被隱藏的元素，也可以通過DOM對它進行操作。

2.overflow: hidden;
    原理: 將元素位置設置到父元素的外面。

3.設置元素的寬高等盒子模型的屬性值為0。

4.利用定位隱藏元素。
    優點：只要通過將元素的left和top設置足夠大的負數 (這個元素可以跟用戶進行交互);
    缺點：仍然可以使用讀屏軟件讀取元素的內容。

5.opacity:設置元素透明度為0。
    特點: 將元素的透明度設置為0，只是從視覺隱藏元素，元素本身的位置仍然存在，也可以跟用戶進行交互。

6.visibility: 設置元素是否可見。
        默認為：visible(可見);
        隱藏(不可見)：hidden。
    特點: 隱藏元素，但是會保留元素的位置。