DOM元素display、visibility、opacity三种隐藏方式的对比

方式一、display： none

1. DOM结构：浏览器不会渲染display属性为none的元素，不占用空间；
2. 事件监听：无法进行DOM事件监听，毕竟没有被渲染出来；
3. 性能：动态改变此属性会引起重排，性能较差；
4. 继承：不会被子元素继承，毕竟子元素也不会被渲染出来
5. transition（过渡）：不支持display。

方式二、visibility： hidden

1. DOM结构：元素被隐藏，但会被渲染，占用空间；
2. 事件监听：无法进行DOM事件监听；
3. 性能：动态改变此属性会引起重绘，性能较高；
4. 继承：会被子元素继承，子元素可以通过visibility： visible 来取消隐藏
5. transition（过渡）：visibility会立即显示，隐藏时会延时。

方式三、opacity： 0

1. DOM结构：透明度为100%，元素隐藏，占用空间；
2. 事件监听：可以进行DOM事件监听；
3. 性能：不会引起重绘，性能较高；
4. 继承：被子元素继承，但子元素不能通过opacity：1 来取消隐藏；
5. transition（过渡）：可以延时显示可隐藏（做隐藏和显示网页特效时一般用opacity）。