display: none和visibility: hidden的主要區別在于元素是否占位及脫離文檔流。1. display: none使元素完全不顯示且不占位，脫離文檔流，適用于動態控制展示或布局變化大的場景；2. visibility: hidden僅隱藏元素但仍占位，保留文檔流位置，適用于保留布局結構或過渡動畫場景；3. display: none的子元素無法通過visibility: visible顯示，而visibility: hidden的子元素可單獨設為可見。兩者根據具體需求選擇使用。
在css中，display: none和visibility: hidden都可以讓元素“看不見”，但它們的行為方式有明顯區別。簡單來說，display: none會讓元素徹底從頁面布局中消失，而visibility: hidden只是隱藏了元素的顯示，但它仍然占據原本的空間。
display: none：元素完全不顯示并脫離文檔流
使用display: none時，元素不僅不可見，還會被瀏覽器當作不存在一樣處理。這意味著它不會占據任何空間，周圍的元素會自動填補它的位置。
舉個例子，如果你有一個按鈕設置了display: none，那么這個按鈕就不會出現在頁面上，也不會影響布局。常用于需要動態控制某個區域是否展示的時候，比如菜單切換、彈窗關閉等。
立即學習“前端免費學習筆記（深入）”；
常見用法：
- 動態隱藏或顯示某個模塊
- 移動端適配時隱藏PC端專屬內容
- 配合JavaScript實現交互效果
需要注意的是，display: none會影響dom結構的表現，某些依賴于元素尺寸或位置的腳本可能會因此出錯。
visibility: hidden：隱藏元素但仍占位
與display: none不同，visibility: hidden只是讓元素不可見，但它仍然保留在文檔流中，保留原來的位置和大小。也就是說，頁面布局不會發生變化。
比如你有一個紅色方塊設置了visibility: hidden，雖然你看不見它，但它所在的位置仍然是空著的，其他元素不會移動過來。
適用場景包括：
- 想保留布局結構但臨時隱藏內容
- 制作動畫過程中過渡狀態
- 表格中某些單元格需要隱藏但不影響整體結構
一個常見的誤區是以為這兩個屬性可以互換使用，其實它們對布局的影響完全不同。
兩者的主要區別總結
| 特性 | display: none | visibility: hidden |
|---|---|---|
| 是否可見 | 不可見 | 不可見 |
| 是否占位 | 不占位 | 占位 |
| 是否脫離文檔流 | 是 | 否 |
| 子元素是否會繼承 | 會（子元素也無法顯示） | 會，但可以通過設置子元素為visibility: visible單獨顯示 |
還有一個小細節是，當父元素設為display: none時，其所有子元素都會被隱藏且無法通過設置visibility: visible來單獨顯示；而如果父元素是visibility: hidden，子元素是可以單獨設為可見的。
基本上就這些。這兩個屬性各有用途，選擇哪個要看具體需求。像布局變化大的時候用display: none更合適，而只想隱藏內容又不想打亂布局的話，visibility: hidden更穩妥。
