display:none与visibility:hidden区别

display:none与visibility:hidden有一个共同的作用是隐藏要显示的内容isplay:none 隐藏,但是不占空间 “看不见摸不到” 加载

display:none 隐藏,但是不占空间 看不见摸不到
不产生任何框,对布局没有影响,浏览器不显示其包括其后代元素,更不会占位


visibility:hidden 保留元素空间重绘,看不见 摸得到,相当于 留白 加载进来,因为他的空间是一直存在的,会生成元素框,只是元素不可视

针对他们的加载 现在有两种讨论,主要是针对于display:none的加载,visibility:hidden是页面加载时直接加载进来的,而对于display:none,到底是当其属性值从none改为block时才会加载还是一开始就加载进去不显示不占位,针对这个问题,有一个帖子也吵得挺厉害,具体是什么样不太清楚,个人感觉是一次性加载进去。

 

原文地址:https://www.cnblogs.com/huixinyudeboke/p/5517382.html