浅谈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/archive/2013/05/10/3070310.html