本文主要包含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慢。
如果你以上两种方法都不想要的话，可以写一个类：
see how it affects the flow.</div>
对使用display:none;的元素，浏览器不会去解析，搜索引擎可能会认为被隐藏的文字属于垃圾信息而被忽略，而且屏幕阅读器（是为视觉上有障碍的人设计的读取屏幕内容的程序）会忽略被隐藏的文字。
而对使用visibility:hidden;的元素，虽然隐藏了，但位置仍在，给人的感觉是“占着茅坑布拉斯”，要配合position:relative和position:absolute一起来用，没有display:none;那么简单、灵活。就另外一点，visibility:hidden;转换为visibility:visible跟display:none;转换为display:block;性能要好，因为display在切换可见性时会产生reflow，它要重新构建frame，当然要比visibility:visible慢。
如果你以上两种方法都不想要的话，可以写一个类：
see how it affects the flow.</div>