相同点

visibility:hidden, display:none, opacity:0 都能隐藏dom元素

不同点

1、visibility跟opacity是不会改变dom页面，位置不变，只是看不见。
display会改变dom页面，dom元素会从页面移除。
2、事件操作：visibility、display不会触发任何事件，
opacity可以触发事件如点击事件

display: none;

1、DOM结构：浏览器 不会渲染 display:none; 的元素，不占据空间
2、事件监听：无法进行DOM事件监听
3、性能：动态改变此属性时，会引起重排，性能较差
4、继承：不会被子元素继承，因为子元素也不会被渲染
5、transition过渡：transition不支持display

visibility: hidden;

1、DOM结构：元素被隐藏，但是会被渲染不会消失，占据空间
2、事件监听：无法进行DOM事件监听
3、性能：动态改变此属性时，会引起重绘，性能较高
4、继承：会被子元素继承，但是子元素可以通过设置 visibility: visible; 来取消隐藏
5、transition过渡：visible会立即显示，hidden时可以过渡

opacity: 0;

1、DOM结构：透明度为100%时，元素隐藏并占据空间
2、事件监听：可以监听DOM事件
3、性能：提升为合成层，不会触发重绘，性能较高
4、继承：会被子元素继承，并且子元素 不能通过 opacity: 1; 来取消隐藏
5、transition过渡：隐藏和显示均支持过渡