在网站上看到:“
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,要使用visibility:hidden
禁止使用display:none,因为screen-reader的残疾人不可阅读,因此要用visibility:hidden隐藏,screen-reader也可识别。
隐藏 { overflow:hidden; position:absolute; top:0; left:0; visibility:hidden; font-size:0; width:0; height:0; line-height:0; }
显示 { overflow:visible; position:static; top:auto; left:auto; visibility:visible; font-size:medium; width:auto; height:auto; line-height:normal; }