隐藏元素方式总结

隐藏页面中的某些元素的方法有哪些？

隐藏方法大致分为3大类

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

完全隐藏

1. 设置 display: none;
2. 使用H5新增属性 hidden <div hidden>demo</div>，相当于第一条。

视觉上隐藏

1. 设置 opacity: 0; 将透明度设置为0。
2. 设置 visibility: hidden;
3. 设置绝对定位后，将top/left设置一个很大很边缘的负值，就从视口消失了，并且绝对定位会使元素脱离文档流。
4. 设置margin为一个很大的负值
5. 设置宽高的0、overflow为hidden
6. 裁剪元素，使用 clip-path，clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px); 是CSS3新增属性。

语义上的隐藏

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