当前位置: 代码迷 >> 综合 >> opacity: 0、 visibility: hidden、display: none 对比记录
  详细解决方案

opacity: 0、 visibility: hidden、display: none 对比记录

热度:18   发布时间:2023-12-13 07:43:06.0

简单记录:

display:none:

会让元素完全从渲染树中消失,渲染的时候不占据任何空间, 不能点击

更改时会触发回流,性能消耗大

不可继承,影响子元素

visibility: hidden:

不会让元素从渲染树消失,渲染元素继续占据空间,只是内容不可见,不能点击

更改时会触发重绘,性能消耗小

可继承,不影响子元素

opacity: 0:

不会让元素从渲染树消失,渲染元素继续占据空间,只是内容不可见,可以点击

更改时会触发重绘,性能消耗小

不可继承,影响子元素

  相关解决方案