display:none和visibility:hidden的区别是 ？

display: none 和 visibility: hidden 都可以用来隐藏 HTML 元素，但是它们之间有一些重要的区别：

1. 空间占用：当元素被设置为 display: none 时，这个元素会从文档流中完全移除，就像它从来没有存在过一样。它不会占据任何空间，也不会影响到其他元素的布局。而当元素被设置为 visibility: hidden 时，这个元素虽然不可见，但是它依然会占据空间，依然会参与布局。

2. 对子元素的影响：display: none 会影响到元素的所有子元素，如果一个元素被设置为 display: none，那么它的所有子元素也都会被隐藏，无论子元素的 display 属性是什么。而 visibility: hidden 不会影响到子元素的 visibility 属性，也就是说，如果一个元素被设置为 visibility: hidden，它的子元素依然可以通过设置 visibility: visible 来显示。

3. 对事件的影响：被设置为 display: none 的元素不会响应任何事件，例如鼠标点击事件。而被设置为 visibility: hidden 的元素依然可以响应事件，例如，即使一个按钮被设置为 visibility: hidden，用户依然可以通过 Tab 键导航到这个按钮，并使用 Enter 键来触发点击事件。

以上就是 display: none 和 visibility: hidden 的主要区别。总的来说，display: none 更像是“删除”元素，而 visibility: hidden 更像是“隐藏”元素。