CSS 中，有哪些方式可以隐藏页面元素？区别？
通过 CSS 实现隐藏元素的方法有如下几种，各自的可见性、占位、可访问性都不同：
| 方式 | 是否占位 | 是否可点击 | 是否可被屏幕阅读器读取 |
|---|---|---|---|
display: none | 否 | 否 | 否 |
visibility: hidden | 是 | 否 | 否（部分浏览器） |
opacity: 0 | 是 | 是 | 是 |
position: absolute; left: -9999px | 否（移出视口） | 否 | 是 |
transform: scale(0) / transform: translate(-9999, 0) | 视情况而定 | 否 | 是 |
height/width: 0; overflow: hidden | 否（折叠为 0） | 否 | 否 |
clip-path: circle(0) / clip: rect(0,0,0,0) | 是 | 否 | 是 |
z-index: -1 配合定位 | 视情况而定 | 视情况而定 | 是 |
补充：
:none真正移出渲染树，会触发回流；visibility: hidden仅视觉隐藏，会保留盒模型和回流成本（但不会响应事件）。opacity: 0元素仍能接收事件，常用于淡出动画；但要阻止点击需配合pointer-events: none。- 想让隐藏内容对屏幕阅读器可见时，优先使用
clip-path或把元素移出视口，而不是display: none。
