CSS 知识点点滴滴
display: none; visibility: hidden; opacity: 0; 的区别
- DOM 结构：
display：浏览器不会渲染，不占空间visibility：会被渲染，但是元素被隐藏，占空间opacity：会被渲染，元素透明，占空间
- 子元素
display：继承，同样不会被渲染visibility：继承，但是子元素可以设置独立的visibility属性opacity：继承，子元素同样可以设置独立的opacity属性取消隐藏
- 事件
display：无法添加 DOM 事件监听visibility：无法添加 DOM 事件监听opacity：可以添加 DOM 事件监听
- 性能
display：性能较差，会引起重排visibility：性能较高，只会引起重绘opacity：性能较高，提升为合成层，不会触发重绘
- 过度
display：不支持visibility：隐藏支持transition，显示transition失效opacity：显示和隐藏均支持transition
使用pointer-events实现点击穿透
pointer-events属性可以控制元素是否能够成为point event（点击、触控）的 event target。设置pointer-events: none;可以实现点击穿透，适合水印等业务场景使用。