在使用CSS隐藏一些元素时，我们经常用到 display:none 和 visibility:hidden。两者差别如下：
1. 是否占据空间
display:none，该元素不占据任何空间，在文档渲染时，该元素如同不存在（但依然存在文档对象模型树中）。
visibility:hidden，该元素空间依旧存在。
即一个（display:none）不会在渲染树中出现，一个（visibility :hidden）会。
2. 是否渲染
display:none，会触发reflow（回流）（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），进行渲染重绘（repaint）。
visibility:hidden，只会触发repaint（重绘），因为没有发现位置变化，不进行渲染。
3. 是否是继承属性
display:none，display不是继承属性，元素及其子元素都会消失。
visibility:hidden，visibility是继承属性，若子元素使用了visibility:visible，则不继承，这个子孙元素又会显现出来。
opacity: 0 **也会被子元素继承，**但是不能通过设置子元素opacity: 0使其重新显示
4. 读屏器是否读取
读屏器不会读取display：none的元素内容，而会读取visibility：hidden的元素内容。
5.事件响应 、事件绑定
display:none 的元素都已经不再页面存在了，因此肯定也无法触发它上面绑定的事件；
visibility:hidden 元素上绑定的事件也无法触发；
opacity: 0 元素上面绑定的事件是可以触发的。
6.过渡动画
transition对于display 肯定是无效的；
transition 对于 visibility 也是无效的；
transition 对于 opacity** 是有效**。
