三者具体介绍

1. visibility: hidden;

占据空间，隐藏后不会修改 dom 原有样式，

动态修改属性会引起重绘，

事件不会触发，

会被子孙元素继承，子孙可以显示设置 visibility: visible; 来展示子孙元素 子元素设置 visibility: visible; 子元素会展示

2. opacity: 0;

占据空间，隐藏后不会修改 dom 原有样式，

动态修改属性，会引起重绘，支持 transition 动画

事件会触发，

会被子孙元素继承，子元素设置 opacity: 1; 子元素不会展示

3. display: none;

不占据空间，

动态修改属性，会引起重排，不支持 transition 动画

事件不会触发，

不会被子孙继承，子元素设置 display: block; 子元素不会展示