display: none
-
DOM结构: 浏览器不会渲染display:none 的元素, 并且不占据页面空间
- 事件监听: 无法对元素进行事件监听
- 继承: 不会被子元素继承(子元素设置
display: block 不会显示)
- 改动: 改动属性值会引起页面的重排和重绘
- 过渡: 无法设置过渡效果
transition: display无效
visibility: hidden
- 不会被渲染,但是会占据页面空间
- 无法对元素设置事件监听
- 可以继承,子元素设置非
visibility:hidden可以显示
- 改动属性只会引起页面重排
-
transition:visibility会立即显示, hidden有过渡效果
opacity: 0
- 元素被隐藏, 会占据页面空间
- 可以设置事件监听
- 可以继承,
子元素设置opacity可以显示
- 不会重绘也不会重排
-
transition: opacity 可以实现显示隐藏的过渡效果
-
opacity 会触发硬件加速
相关文章：
-
2022-01-17
-
2022-12-23
-
2022-12-23
-
2021-12-19
-
2022-12-23
猜你喜欢
-
2021-12-04
-
2022-12-23
-
2022-02-24
-
2022-12-23
-
2022-12-23
相关资源
-
下载
2022-12-25
-
下载
2023-02-12
-
下载
2023-01-10