隐藏元素有哪些办法，差别是什么？

display: none 不生成盒子，不占位，读屏一般也会跳过。visibility: hidden 占位，只是看不见，子元素可以用 visibility: visible 再显示。opacity: 0 仍然在，能点到，也会被读屏读到。

原理

还有几种「看起来没了」：

hidden 属性，效果接近 display: none。
移出视口，例如 position: absolute; left: -9999px。老的读屏技巧，现在更推荐在确实需要「视觉隐藏但仍可访问」时用专门的裁切类：尺寸压到 1px、overflow: hidden、绝对定位。不要再用大负边距当默认方案。
clip-path 或 height: 0; overflow: hidden 会占布局上的零空间，动画展开时比 display 好控制。display 不能从 none 平滑过渡到块，需要先变成可见再在下一帧改高度。

选择看目的。不希望它参与布局、也不希望被读到，用 display: none 或 hidden。要留空位，用 visibility。要做淡入淡出，用 opacity，并在完全透明且不该点击时加上 visibility 或 pointer-events: none。

追问

opacity: 0 的元素会触发事件吗？

会，除非 pointer-events: none 或它被别的元素盖住。透明不是禁用。

aria-hidden 和这些 CSS 的关系？

aria-hidden="true" 只影响无障碍树，屏幕上看得见。不要用它隐藏本该能操作的控件。CSS 隐藏和可访问性要一起决定。

易错点

visibility: hidden 的元素仍占据空间，父元素高度不会塌掉。
display: none 的元素没有几何信息，getBoundingClientRect 是 0。
用 z-index: -1 藏元素，它可能还挡得住点击，也还在文档流里。

相关