display:none和visibility:hidden的区别！

在网站上看到：“
display:none和visibility:hidden都是把网页上某个元素隐藏起来的功能，但两者有所区别，经过亲自实验，我发现使用 visibility:hidden属性会使对象不可见，但该对象在网页所占的空间没有改变（看不见但摸得到），等于留出了一块空白区域，而 display:none属性会使这个对象彻底消失（看不见也摸不到）。
”这样的解释。
但是我觉得并不够，所以就想了一下关于他的一个加载问题。
有属性display:none;的结构在加载页面时，是否会同时加载呢？或则是当他变成display:block;的时候才加载的呢？
有属性visibility:hidden;   的结构在加载页面时，是否会同时加载呢？或则是当他变成visibility:visible;   的时候才加载的呢？

个人的看法是：
display:;当他的值变成block 的时候，它所在的结构才会被加载进来。
而visibility就会在加载页面的同时就已经把它加载进来了，因为他的值为hidden的时候，它所占的空间还在。

这些观点都是我的一个推测，本人并不知道如何去测试，也找不到这方法的资料，所以到此来跟大家讨论讨论。
还望各位大虾指点迷津。

 

 

这个问题，前些天我去参加一个面试的时候，面试官问过我。回来仔细研究了下，你的解释是完全正确的。

至于你的疑虑。我的答案是（仅供参考）：不管是用了什么css样式，html里的元素都会在打开网页后一并加载。这个说到底也是css的基本功能。就是结 构与表现的分离。我们的html是结构，结构会全部加载，但是在表现的时候（也就是页面的外观），由css来控制你看的到还是看不到而已。

所以你说的：“display:none和visible:hidden都是把网页上某个元素隐藏起来的功能，但两者有所区别，经过亲自实验，我发现使用 visible:hidden属性会使对象不可见，但该对象在网页所占的空间没有改变（看不见但摸得到），等于留出了一块空白区域，而 display:none属性会使这个对象彻底消失（看不见也摸不到）。”

就这样理解即可。

转载于:https://www.cnblogs.com/zhp404/articles/4137787.html