前言
今天我們來總結下隱藏（這裡隱藏式看不見的意思）元素的幾種方法。
display:none
元素在頁面上將徹底消失，元素本來佔有的空間就會被其他元素佔有，也就是說它會導致瀏覽器的重排和重繪。
不會觸發其點擊事件
visibility:hidden
和display:none的區別在於，元素在頁面消失後，其佔據的空間依舊會保留著，所以它只會導致瀏覽器重繪而不會重排。
無法觸發其點擊事件
適用於那些元素隱藏後不希望頁面佈局會發生變化的場景
opacity:0
將元素的透明度設置為0後，在我們用戶眼中，元素也是隱藏的，這算是一種隱藏元素的方法。
和visibility:hidden的一個共同點是元素隱藏後依舊佔據著空間，但我們都知道，設置透明度為0後，元素只是隱身了，它依舊存在頁面中。
可以觸發點擊事件
設置height，width等盒模型屬性為0
簡單說就是將元素的margin，border，padding，height和width等影響元素盒模型的屬性設置成0，如果元素內有子元素或內容，還應該設置其overflow:hidden來隱藏其子元素，這算是一種奇技淫巧。
如果元素設置了border，padding等屬性不為0，很顯然，頁面上還是能看到這個元素的，觸發元素的點擊事件完全沒有問題。如果全部屬性都設置為0，很顯然，這個元素相當於消失了，即無法觸發點擊事件。
這種方式既不實用，也可能存在著著一些問題。但平時我們用到的一些頁面效果可能就是採用這種方式來完成的，比如jquery的slideUp動畫，它就是設置元素的overflow:hidden後，接著通過定時器，不斷地設置元素的height，margin-top，margin-bottom，border-top，border-bottom，padding-top，padding-bottom為0，從而達到slideUp的效果。
其他腦洞方法
設置元素的position與left，top，bottom，right等，將元素移出至屏幕外
設置元素的position與z-index，將z-index設置成儘量小的負數
閱讀更多 星前線 的文章
