隐藏元素的方式总结

• 完全隐藏：元素从渲染树中消失，不占据空间。
• 视觉上的隐藏：屏幕中不可见，占据空间。
• 语义上的隐藏：读屏软件不可读，但正常占据空间。

完全隐藏

display:none

display 属性的值为 none，那么该元素的显示就被关闭了。这意味着该元素以及它的子元素将不会被显示。文档在没有该元素的情况下被渲染，就像它不存在一样。

hidden

<div hidden></div>

html5 新增属性，直接写在元素上

视觉上的隐藏

opacity:0

opacity 属性的值为 0，那么该元素将完全透明，不可见。

visibility:hidden

指定了一个元素是否可见。但是，这个属性并不影响元素的布局。

绝对定位

position:absolute;
left:-9999px;
top:-9999px;

将元素移出可视区域，使其不可见。

设置 margin

margin-left: -9999px;

通过设置巨大的外边距，将元素移出可视区域。

设置宽高为 0

width:0;
height:0;
overflow:hidden;

通过设置元素的宽度和高度为 0，并隐藏其溢出内容，使其不可见。

裁剪元素

clip-path: polygon(0 0, 0 0, 0 0, 0 0);

通过裁剪路径将元素完全裁剪掉，使其不可见。

语义上的隐藏

<div aria-hidden="true"></div>

设置 aria-hidden 属性为 true 使读屏软件不可读，但是元素仍然占据空间并且可见。