首页 > 代码库 > display:none和visibility:hidden的区别

display:none和visibility:hidden的区别

  为了便于理解,我们会使用情感化思维,类比现实,在内心形成只属于自己的具象化的想法。这是很OK的,但是,要知道,事物是具有两面的,具象的东西容易让我们陷入固定思维模式,尤其在现实世界中非特殊情境的验证下,从而让我们不经意间产生一些错误的认识。

  display:none和visibility:hidden

  目前,我所知道的不同有三点:

  1. 空间占据:这两个声明都可以让元素隐藏,不同之处在于display:none隐藏后的元素不占据任何空间,而visibility:hidden隐藏的元素空间依旧存在。

  2. 回流与重绘:display:none隐藏产生reflow和repaint(回流与重绘),而visibility:hidden没有这个影响前端性能的问题。

  3. 株连性:所谓“株连性”,就是祖先遇害后,子孙也会被祸害。display:none会产生这样一个特性,当父元素设置之后,子元素都会无一例外地被隐藏,而visibility:hidden父元素在设置之后,子元素设置visibility:visible可以显示出来。