前端 CSS 面试题, display:none 与 visibility:hidden 的区别

Step 1

Q:: display:none 与 visibility:hidden 有什么区别?

A:: display:none 会将元素完全从文档中移除，不占据任何空间；而 visibility:hidden 则只是不显示元素，但仍然占据空间。这两个属性都可以用来隐藏元素，但使用的场景不同。

Step 2

Q:: 什么时候选择使用 display:none，什么时候使用 visibility:hidden?

A:: 如果需要完全移除元素并且不希望它影响布局，可以使用 display:none；如果只是想暂时隐藏元素但保留其在布局中的位置，可以使用 visibility:hidden。

Step 3

Q:: 使用 display:none 与 visibility:hidden 的性能差异是什么?

A:: 从性能角度看，display:none 可能会稍微更消耗性能，尤其在处理复杂的 DOM 树时，因为它完全移除了元素。visibility:hidden 只改变元素的可见性，影响较小。

Step 4

Q:: 在 CSS 中，如何使用 display 和 visibility 属性来实现渐隐渐现的动画效果?

A:: 可以使用 CSS 的 transition 属性配合 opacity 进行渐隐渐现的动画，而不是直接使用 display:none，因为 display:none 是瞬时的，不能渐变。对于 visibility:hidden，可以结合 opacity 和 transition 来实现渐变。