display none 与 visibility hidden 的区别是什么

display: none 与 visibility: hidden 的区别是什么？

display: none 隐藏对应的元素但不挤占该元素原来的空间。

visibility: hidden 隐藏对应的元素并且挤占该元素原来的空间。

即是，使用 CSS display: none 属性后，HTML 元素（对象）的宽度、高度等各种属性值都将"丢失"；而使用 visibility: hidden 属性后，HTML 元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。

补充：进一步对比：

• 回流/重绘：display: none 会触发回流（脱离渲染树），visibility: hidden 仅触发重绘。
• 事件响应：两者都不会响应点击事件；如需仍可点击，visibility: hidden 配合 JS 切换、opacity: 0 更合适。
• 子元素：visibility: hidden 可以被子元素用 visibility: visible"反向可见"；display: none 无此效果。
• 动画过渡：display 是离散值不能过渡；visibility 可以在隐藏/可见之间过渡。