display:none； visibility:hidden； opacity:0 区别

display:none

1、DOM结构：浏览器不会渲染display为none的元素，不占据空间；

2、事件监听：无法进行DOM事件监听；

3、性能：动态改变DOM结构，会引起重排，性能较差；

4、继承：不会被子元素继承，因为子元素不会被渲染；

5、transition:不支持display。

visibility:hidden

1、DOM结构：元素被隐藏，还存在文档流中，占据一定的空间；

2、事件监听：无法进行DOM事件监听

3、性能：动态改变此属性会引起重绘，性能友好；

4、继承：回被子元素继承，子元素通过设置visibility:visible来取消隐藏；

5、transition：visibility时会立即显示，hidden时会延时

opacity:0

1、DOM结构：透明度设置为100%时，元素被隐藏，还在文档流中，占据一定空间；

2、事件监听：可以进行事件监听；

3、性能：提升为合成层，不会触发重绘，性能较高；

4、继承：会被子元素继承，但子元素不能通过opacity:1来取消隐藏；

5、transition:opacity可以延时显示和隐藏

实例：

1、绑定事件

  点我啊


  点我啊


  点我啊

执行事件的时候，只有opcity触发

2、继承

  
你看不见我1display
  
你看不见我2display
  
你看不见我3isplay



  
你看不见我1isibility
  
你看不见我2visibility
  
你看不见我3isibility


  
你看不见我1opcity
  
你看不见我opcity
  
你看不见我3opcity

3、动画

 

  显示出来显示出来
  

	  我没有动画效果
  



  显示出来显示出来
  

	  我有动画效果
  


  显示出来显示出来
  

	  我有动画效果
  

注意：

display:none参与的动画效果是不会产生过渡动画的,
即使你设置了过渡的时间。
 
visibility: hidden参与的动画会产生过渡效果;
因为css3对transition支持的属性中就visibility；
但是没有对display进行支持。

display为none,虽然不在文档流中，但是还在DOM 中