元素的顯示和隱藏
display:none
元素在頁面上將徹底消失，元素本來占有的空間就會被其他元素占有，也就是說它會導致瀏覽器的重排和重繪，并且不會觸發它的點擊事件，
visibility:hidden
元素在頁面消失后，其占據的空間依舊會保留著，所以它只會導致瀏覽器重繪而不會重排，也無法觸發它的點擊事件
opacity:0
將元素的透明度設定為0后，也可以視為一種隱藏，這算是一種隱藏元素的方法，和visibility:hidden的一個共同點是元素隱藏后依舊占據著空間，但我們都知道，設定透明度為0后，元素只是隱身了，它依舊存在頁面中，所以依然可以觸發點擊事件，
設定height，width等盒模型屬性為0
將元素的margin，border，padding，height和width等影響元素盒模型的屬性設定成0，如果元素內有子元素或內容，也應該設定其overflow:hidden來隱藏其子元素，這也算是一種隱藏元素的方法，如果全部屬性都設定為0，很顯然，這個元素相當于消失了，所以無法觸發它的點擊事件，
總結
| 顯示隱藏方式 | 是否占據空間 | 是否導致瀏覽器重排重繪 | 能否觸發點擊事件 |
|---|---|---|---|
| display : none | 不占空間 | 會導致瀏覽器重排和重繪 | 不會觸發其點擊事件 |
| visibility : hidden | 占空間 | 不會導致瀏覽器重排和重繪 | 不會觸發其點擊事件 |
| opacity : 0 | 占空間 | 不會導致瀏覽器重排和重繪 | 會觸發其點擊事件 |
| 設定height，width等盒模型屬性為0 | 設定為0后不占空間 | 可能會導致瀏覽器重排和重繪 | 設定為0后不會觸發其點擊事件 |
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/7559.html
標籤：AI
下一篇：css標簽顯示模式