一說起CSS隱藏元素，我想大部分小伙伴們都會想到的第一種方法就是設置display為none。這是最為人所熟知也是最常用的方法。我相信還有不少人想到使用設置visibility為hidden來隱藏元素，這種方式也是常用的方法，而且也有很多人知道兩者的不同。除了這兩種方法，本文還總結了一些比較不常用的方法，比較了這幾種“隱藏”元素方法的區別和優缺點，歡迎大家交流！！
幾種方法的簡單介紹
首先我們分別來說說到底有哪幾種隱藏元素的方法，有一些方法是眾所周知的，還有一些算是一種技巧。
display:none
設置元素的display為none是最常用的隱藏元素的方法。
將元素設置為display:none后，元素在頁面上將徹底消失，元素本來占有的空間就會被其他元素占有，也就是說它會導致瀏覽器的重排和重繪。
visibility:hidden
設置元素的visibility為hidden也是一種常用的隱藏元素的方法，和display:none的區別在于，元素在頁面消失后，其占據的空間依舊會保留著，所以它只會導致瀏覽器重繪而不會重排。
visibility:hidden適用于那些元素隱藏后不希望頁面布局會發生變化的場景
opacity:0
opacity屬性我相信大家都知道表示元素的透明度，而將元素的透明度設置為0后，在我們用戶眼中，元素也是隱藏的，這算是一種隱藏元素的方法。
這種方法和visibility:hidden的一個共同點是元素隱藏后依舊占據著空間，但我們都知道，設置透明度為0后，元素只是隱身了，它依舊存在頁面中。
設置height，width等盒模型屬性為0
這是我總結的一種比較奇葩的技巧，簡單說就是將元素的margin，border，padding，height和width等影響元素盒模型的屬性設置成0，如果元素內有子元素或內容，還應該設置其overflow:hidden來隱藏其子元素，這算是一種奇技淫巧。
新聞熱點
疑難解答
