浅谈display:none;visibility:hidden;opacity:0;的区别

写着篇随笔的原因是,这几天在面试的过程中碰到了这个题目,主要的是我在WEB响应式设计一书中看到display:none;设置的内容浏览器依然会加载的。而在百度上看到的博文确实不会被加载。

来图一发:

是不是?而且这篇文章还不止在一个地方被转载了!!!。。。。。。

display:none;把一个元素隐藏,同时去除了宽高,也就是在文档流中没有了元素的位置,但是会被加载的哦;

visibility:hidden;把一个元素隐藏,但不同的是该元素在文档流中依然占有原来的位置,同样是被加载的哦;

opacity:0;设置一个元素的透明度,当一个元素彻底透明了,也就是隐身啦,不用说也会占有其文档流的位置啦,也会加载的,哈哈!

其实这个验证也是很容易的,写一个页面,只加载一张图片,当然这个图片的大小一定要大,对图片所在的DIV设置display:none;看浏览器的反应时间。对比试验就是设置成display:block;再看一下反应时间。原理很简单,这里就不在贴代码啦~~欢迎感兴趣的同学去试试啊!

其实这里知识还是很多的,想了解的请猛点:

详细介绍

原文地址:https://www.cnblogs.com/happycloud/p/3070310.html