visibility:hidden和display:none之间有什么区别？

在前端开发中，visibility:hidden和display:none都可以用于隐藏页面元素，但它们之间有一些区别：

1. 可见性：

visibility:hidden：元素在页面上仍然占据空间，但是不可见。其他元素会察觉到它的存在，并自动调整位置以避免重叠。

display:none：元素在页面上完全消失，不占据任何空间。其他元素不会调整位置以避免重叠。

1. 动画：

visibility:hidden：可以在CSS动画中使用，但display:none无法在CSS动画中使用。

1. 子元素：

visibility:hidden：子元素仍然可见，只是父元素不可见。

display:none：子元素也会被隐藏，因为它们不会被渲染。

1. 交互：

visibility:hidden：元素仍然可以接收鼠标事件和键盘输入。

display:none：元素无法接收鼠标事件和键盘输入，因为它们不可见。

总结：visibility:hidden和display:none都可以用于隐藏页面元素，但display:none更加绝对，不占据任何空间，而visibility:hidden仍然占据空间，但不可见。在选择时，需要根据具体需求和场景来决定使用哪一个。