visiblity:hidden和display:none的差异
需积分: 31 93 浏览量
2013-01-25
15:03:19
上传
评论
收藏 17KB DOCX 举报
visiblity:hidden 和 display:none 的差异
记得之前一个师弟问我，display:none 和 visiblity:hidden 都可以用来隐藏元素，
有什么区别？我当时没有多想就说用哪个效果都差不多，近来又想起这个问题，就花
了点时间研究并总结了下，现在想想，当时真是误人子弟啊，于是记下此文，算是忏
悔吧。
visiblity 属性 VS display 属性
visiblity 属性有四个值（visible、hidden、collapse 和 inherit）。常用的是
visible 和 hidden；
含义分别是：
visibility: visible/*元素可见，默认值 */
visibility: hidden/*元素不可见，但仍然为其保留相应的空间 */
visibility: collapse/*只对 table 对象起作用，能移除行或列但不会影响表格的布局。
如果这个值用在 table 以外的对象上则表现为 hidden 。 */
visibility: inherit/*继承上级元素的 visibility 值。 */
Display 属性的可用值有很多，因为浏览器兼容问题，在这里我们只讨论其中的
3 个值：block、none 和 inline 。
含义分别是：
display: none/* 元素不可见，并且不为其保留相应的位置 */
display: block/* 表现为一个块级元素（一般情况下独占一行） */
display: inline/* 表现为一个行级元素（一般情况下不独占一行） */
由上可以看出，visiblity 和 display 都可以达到隐藏元素的目的，只是其
中"display：none"除了隐藏元素之外，该隐藏元素的占位也会同时消失，可能引起
布局的改变；"visibility:hidden"了，其作用就是仿佛元素内容被清空(或者内容变透
明)，但是仍然维持占据其原来的长度和宽度。
但是除了表面的效果差异外，display:none"因为改变了页面的布局，将引起向
render tree 的回流，大家都知道，过多的页面回流对网站的性能来说可不是一样好
东西，想想平时自己还狂用 display:none 都有点后怕了，因此，在二者都可以用的
情况下，尽量用 visibility；
评论0
最新资源