display、visibility、opacity隐藏元素的区别

display、visibility、opacity隐藏元素的区别

display: none

• 事件监听：无法进行DOM事件监听。

• 元素从网页中消失，并且不占据位置
• 再次从网页中出现会引起重排 进而引起重绘
• 继承：不会被子元素继承，因为子元素也不被渲染。

visibility: hidden

• 事件监听：无法进行DOM事件监听。

• visibility 具有继承性，其子元素也会继承此属性，

  • 若设置 visibility:visible，则子元 素会显示

• 网页从页面消失，并且不占据位置

• 显示隐藏只会引起重绘

opacity: 0

• 事件监听：DOM可以事件监听。

• 继承：会被子元素继承，子元素不能通过设置opacity:1;来取消隐藏
• 根据浏览器对其底层实现的不同不确定会不会引起重绘
  • 如果生成合成层就不会引起
  • 反之则会引起