display和opacity以及visibility

 

1.display:none是完全消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，能够理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；

2.使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素须要改变规模尺寸、布局、显示隐藏等，页面从新构建，此时就是回流。全部页面第一次加载时须要产生一次回流），而visibility切换是否显示时则不会引发回流。

3.opacity: 0 是透明度为0

具体来讲应该是： 

1 opacity=0，该元素隐藏起来了，但不会改变页面布局，而且，若是该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的
2 visibility=hidden，该元素隐藏起来了，但不会改变页面布局，可是不会触发该元素已经绑定的事件
3 display=none，把元素隐藏起来，而且会改变页面布局，能够理解成在页面中把该元素删除掉同样