相同点

1、三者都可以隐藏元素

不同点

1、display：none，隐藏之后是不占据空间的，而且它和它所有的子元素都会被隐藏。
2、visibility：hidden ，隐藏之后是会占据空间。
3、opacity：0，则是让元素变透明，也是会占据空间。

1、display：none，不会被继承因为都被隐藏了。
2、visibility：hidden ，会被子元素继承，但是可以通过设置visibility：visible来让子元素显示。
3、opacity：0，会被子元素继承。

1、display：none，无法触发事件。
2、visibility：hidden ，无法触发事件。
3、opacity：0，仍会触发事件。

1、display：none，不在生效。
2、visibility：hidden ，不在生效。
3、opacity：0，仍会生效。

1、display：none，产生回流和重绘。
2、visibility：hidden ，只会引起页面重绘。
3、opacity：0，只会引起页面重绘。