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
更像是“隐藏”元素。