display: none 和 visibility: hidden 的差異？

核心差異

特性	display: none	visibility: hidden	opacity: 0
是否可見	❌ 不可見	❌ 不可見	❌ 不可見
佔據空間	❌ 不佔空間	✅ 仍佔空間	✅ 仍佔空間
可觸發事件	❌	❌	✅ 可點擊
觸發 Reflow	✅ 會	❌ 不會	❌ 不會
子元素繼承	—	可覆寫	不可覆寫

display: none

.hidden {
  display: none;
}

• 元素從文件流中完全移除，不佔空間
• 隱藏時觸發 Reflow（版面重新計算），效能成本較高
• 子元素即使設定 display: block 也不會顯示

visibility: hidden

.hidden {
  visibility: hidden;
}

• 元素變透明，但仍保留原本的空間
• 不觸發 Reflow，效能較佳
• 子元素可設定 visibility: visible 來覆蓋父元素的隱藏

opacity: 0（補充）

.hidden {
  opacity: 0;
}

• 元素完全透明，但仍可觸發點擊事件
• 不觸發 Reflow，且可搭配 transition 做淡入淡出動畫

使用情境建議

• display: none：完全移除元素，如收合的選單、Tab 切換
• visibility: hidden：保留空間但隱藏，如佔位符
• opacity: 0：製作淡入淡出過場動畫