display:none和visibility:hidden的区别是 ？
display: none 和 visibility: hidden 都可以用来隐藏 HTML 元素，但是它们之间有一些重要的区别：
- 空间占用：当元素被设置为
display: none时，这个元素会从文档流中完全移除，就像它从来没有存在过一样。它不会占据任何空间，也不会影响到其他元素的布局。而当元素被设置为visibility: hidden时，这个元素虽然不可见，但是它依然会占据空间，依然会参与布局。 -
对子元素的影响：
display: none会影响到元素的所有子元素，如果一个元素被设置为display: none，那么它的所有子元素也都会被隐藏，无论子元素的display属性是什么。而visibility: hidden不会影响到子元素的visibility属性，也就是说，如果一个元素被设置为visibility: hidden，它的子元素依然可以通过设置visibility: visible来显示。 -
对事件的影响：被设置为
display: none的元素不会响应任何事件，例如鼠标点击事件。而被设置为visibility: hidden的元素依然可以响应事件，例如，即使一个按钮被设置为visibility: hidden，用户依然可以通过 Tab 键导航到这个按钮，并使用 Enter 键来触发点击事件。
以上就是 display: none 和 visibility: hidden 的主要区别。总的来说，display: none 更像是“删除”元素，而 visibility: hidden 更像是“隐藏”元素。