关于visibility和display的区别

 了解Css的人应该都知道display:none;和visibility:hidden;之间的一些区别,当html元素被设置为display:none;后,浏览器不会解析该元素,“none”就是没有,消失了,所以他不会再文档流中占位。而visibility:hidden;仅仅是视觉上消失了,“hidden”也就是隐藏了,但是它所在的位置仍然还在,就像你把你个文件给隐藏了,但是这个文件在你的硬盘中仍然是占据一定空间的,只是你看不见而已。
    对使用display:none;的元素,浏览器不会去解析,搜索引擎可能会认为被隐藏的文字属于垃圾信息而被忽略,而且屏幕阅读器(是为视觉上有障碍的人设计的读取屏幕内容的程序)会忽略被隐藏的文字。
    而对使用visibility:hidden;的元素,虽然隐藏了,但位置仍在,给人的感觉是“占着茅坑布拉斯”,要配合position:relative和position:absolute一起来用,没有display:none;那么简单、灵活。就另外一点,visibility:hidden;转换为visibility:visible跟display:none;转换为display:block;性能要好,因为display在切换可见性时会产生reflow,它要重新构建frame,当然要比visibility:visible慢。
    如果你以上两种方法都不想要的话,可以写一个类:
    .hidden{
        overflow: hidden;
        width: 0;
        height: 0;
        border:none;
    }
    就是采用overflow隐藏,然后把元素的基本属性值设置为最小或无,当然,如果你要显示的话,还得写另一个相应的类。
本博客所有文章如无特别注明均为原创。作者:sysdee复制或转载请以超链接形式注明转自 成功志
原文地址《关于visibility和display的区别
分享到:更多

相关推荐

发表评论

路人甲 表情
看不清楚?点图切换 Ctrl+Enter快速提交

网友评论(0)