2018-09-15

                                     display none与visibility:hidden的区别

一、空间占据
display:none——隐藏后不占据额外空间，把元素隐藏起来，所以动态改变此属性时会引起改变页面布局，也可以理解成在页面中把该元素删除掉一样，无法点击；
visibility:hidden——元素虽然隐藏了，但是不会消失，依然占据空间，隐藏后不会改变html原有样式。
二、子元素继承
display:none——不会被子元素继承，但是父元素都不在了，子元素自然也就不会显示了，
visibility:hidden—— 会被子元素继承，可以通过设置子元素visibility:visible 使子元素显示出来
三、事件绑定
display:none—— 的元素都已经不再页面存在了，因此肯定也无法触发它上面绑定的事件，
visibility:hidden ——元素上绑定的事件也无法触发
四、过度动画
transition对于display和visibility都是无效的