display:none、opacity:0、visibility:hidden三种隐藏元素的介绍和适用场景

三种隐藏元素display:none、opacity:0、visibility:hidden的介绍和适用场景：

一、display:none隐藏元素

（1）DOM 结构：浏览器不会渲染 display 属性为 none 的元素，会让元素完全从渲染树中消失，渲染的时候不占据任何空间；

（2）事件监听：无法进行 DOM 事件监听，不能点击；

（3）性能：修改元素会造成文档回流（reflow 与 repaint）,读屏器不会读取display: none元素内容，性能消耗较大；

（4）继承：是非继承属性，由于元素从渲染树消失，造成子孙节点消失，即使修改子孙节点属性子孙节点也无法显示，毕竟子类也不会被渲染；

（5）场景：显示出原来这里不存在的结构；

（6）transition：transition 不支持 display。

二、opacity:0隐藏元素

（1）DOM 结构：透明度为 100%，不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见；

（2）事件监听：可以进行 DOM 事件监听，可以点击；

（3）性能：提升为合成层，是重建图层，不和动画属性一起则不会产生repaint（不脱离文档流，不会触发重绘），性能消耗较少；

（4）继承：会被子元素继承，且子元素并不能通过 opacity: 1 来取消隐藏；

（5）场景：可以跟transition搭配；

（6）transition：transition 支持 opacity，opacity 可以延时显示和隐藏。

三、visibility:hidden隐藏元素

（1）DOM 结构：不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见；

（2）事件监听：无法进行 DOM 事件监听，不能点击；

（3）性能：修改元素只会造成本元素的重绘（repaint），是重回操作，比回流操作性能高一些，性能消耗较少；读屏器读取visibility: hidden元素内容；

（4）继承：是继承属性，子孙节点消失是由于继承了visibility: hidden，子元素可以通过设置 visibility: visible 来取消隐藏；

（5）场景：显示不会导致页面结构发生变动，不会撑开；

（6）transition：transition 支持 visibility，visibility 会立即显示，隐藏时会延时。

如果看了上面的还不能形象的理解，那就打个比方，会让您一目了然：

（1）display: none： 从这个世界消失了, 不存在了；

（2）opacity: 0： 视觉上隐身了, 看不见, 可以触摸得到；

（3）visibility: hidden： 视觉和物理上都隐身了, 看不见也摸不到, 但是存在的。