display:none和visibility:hidden的区别?

🌙
手机阅读
本文目录结构
axihe

这两个声明都可以让元素隐藏,不同之处在于display:none隐藏后的元素不占据任何空间它各边的元素会合拢,就当他从来不存在,而visibility:hidden隐藏的元素空间依旧存在。”

想在想想,自己实在是浮躁了点。

这种程度的答案说明你在HTML/CSS方面的造诣只是了解这个层面,并不能让面试官眼前一亮。

目前,我所知道的不同有三点(欢迎补充):空间占据、回流与渲染、株连性

第一点,想必都知道;

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

第三点估计是不少同行不知道的,就是“株连性”方面的差异。

所谓“株连性”,就是如果祖先元素遭遇某祸害,则其子子孙孙无一例外也要遭殃。display:none就是“株连性”明显的声明:一旦父节点元素应用了display:none,父节点及其子孙节点元素全部不可见,而且无论其子孙元素如何不屈地挣扎都无济于事。

何时隐藏“失效”?很简单,如果子孙元素应用了visibility:visible,那么这个子孙元素可以显现出来。

对比总结:这两个声明都可以让元素隐藏

display:none;隐藏后的元素不占据任何空间,有株连性,父级设置none,子元素就显示不出来了,回引起渲染与回流,影响性能。

visibility:hidden;隐藏的元素空间依旧存在;伪株连性,父级设计hidden,子元素默认不现实,但是可以用过visibility:visible显示出子元素,无渲染与回流。

更多面试题

如果你想了解更多的前端面试题,请点击下面进行选择,这里基本包涵了市场上的所有前端方面的面试题,让你面试更加顺利。

这些题库还在更新中,如果你有不错的面试题库欢迎分享给我,我整理后放上来;人人为我,我为人人,互帮互助,共同提高,祝大家都拿到心仪的Offer!


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang