visibility与display的区别：

visibility与display之设置元素显隐的区别

在CSS里的visibility 属性，通常其值被设置成visible 或hidden。

visibility：hidden 相当于display：none，能把元素隐藏起来，但是两者的区别在于：

1. display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）

2. visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）

实例
css:

没有设置时效果：

设置visibility：hidden后效果：

设置display：none后效果：

visibility和display两个属性都有隐藏元素的功能。

但使用visibility属性并不能减少浏览器打开网页的速度,就是说visibility属性所控制的元素虽然不在浏览器里面显示出来,但他在浏览区里是存在的,浏览器打开网页的时候已经下载了这个元素,只是不显示而已。

并且这个元素在浏览器显示的页面中也要占他本身大小的位置,而这个位置显示的是空白而已。
而display属性设置为none,这个元素就变成了一个不显示的元素,浏览器在载入网页的时候会忽略这个元素,不会下载其内容,浏览器打开速度会比没有设置display属性前要快。

对一个元素而言，如果 display 设置其值为 none 则该元素以及所有后代元素都隐藏。
​ 在 Firefox浏览器下，display：none的元素的background-image图片是不会加载的，包括父元素display：none也是如此；然而在Chrome和Safari浏览器则不同，若父元素display：none，图片不会加载，若是自身背景图所在元素隐藏，则图片依旧会去加载；对IE浏览器而言，不管怎样都会请求图片资源。

visibility 的继承性
如果父元素设置 visibility:hidden，子元素也会看不见，究其原因是继承性，子元素继承visibility:hidden，但是，如果子元素设置了 visibility:visible，则子元素又会显示出来。这个和 display 隐藏有着质的区别。
visibility支持的属性值还有一个collapsecollapse；
当设置元素visibility：collapse后，对于普通元素，其表现等同于 visibility：hidden ，也即其会占用空间。

​ 注：visibility：collapse （作为表格用的）了解就好，对于表格相关的元素，部分现代浏览器对它的解析不准确，无实用价值。