display: none 和 visibility: hidden 都可以隱藏元素，但在如何隱藏以及對頁面佈局的影響方面有所不同：
display: none
- 徹底隱藏： 元素完全從文件流中移除，就像它從未存在過一樣。佔據的空間會被其他元素填充。
- 不佔據空間： 隱藏後的元素不佔據任何空間，不會影響頁面佈局。
- 無法響應事件： 隱藏後的元素無法響應任何使用者互動事件，例如點選、懸停等。
- 子元素也會被隱藏： 除非子元素單獨設定
display屬性為其他值，否則子元素也會被隱藏。 - 效能影響較小： 因為元素完全從渲染樹中移除，所以對瀏覽器效能的影響相對較小，尤其是在隱藏大量元素時。
visibility: hidden
- 視覺上隱藏： 元素只是視覺上不可見，但仍然存在於文件流中，佔據著原來的空間。
- 佔據空間： 隱藏後的元素仍然佔據著原來的空間，會影響頁面佈局。
- 無法響應事件： 與
display: none相同，隱藏後的元素無法響應使用者互動事件。 - 子元素也會被隱藏： 除非子元素單獨設定
visibility屬性為visible，否則子元素也會被隱藏。 - 效能影響較大： 瀏覽器仍然需要渲染隱藏的元素，只是不顯示出來，因此對效能的影響比
display: none大，尤其是在隱藏大量元素時。
總結:
| 特性 | display: none | visibility: hidden |
|---|---|---|
| 佔據空間 | 否 | 是 |
| 影響佈局 | 否 | 是 |
| 響應事件 | 否 | 否 |
| 子元素隱藏 | 是 | 是 |
| 效能影響 | 較小 | 較大 |
使用場景:
- display: none: 適用於希望元素完全從頁面中移除，並且不影響佈局的情況，例如根據條件動態顯示或隱藏某些內容。
- visibility: hidden: 適用於希望元素暫時隱藏，但保留其在頁面佈局中的位置的情況，例如實現類似 loading 效果，或者在切換元素狀態時避免頁面重排。
希望以上解釋能夠幫助你理解 display: none 和 visibility: hidden 的區別。