.hide-opacity{opacity:0;}复制代码
通过下面的gif图，我们可以总结 opacity 隐藏元素有几个特点：
opacity: 1
2. visibility
.hide-visibility{visibility: hidden;}复制代码
通过下面的gif动图，同样我们可以总结出 visibility 隐藏元素的特点：
visibility: visible
3. display
是真正意义上的隐藏元素。
.hide-display{display: none;}复制代码
通过下面的gif动图，我们可以总结出 display: none 隐藏元素的特点：
display: blocktransition
4. hidden
HTML5新增的 hidden 属性，可以直接隐藏元素。
我是被隐藏的元素复制代码
特点：
跟 display 表现一致。
5. position
.hide-position{position: absolute;top: -9999px;left: -9999px;}复制代码
特点：
视觉上的隐藏，实际显示在屏幕的可视区之外，不会占据空间，不影响其他元素的布局
用户无法与其进行直接的交互
元素的内容可以被读屏软件读取（没有测试过）
通过DOM依然可以获取到该元素
其子孙元素无法通过重新设置对应的属性来显示
6. clip-path
通过裁剪元素来实现隐藏。
.hide-clip{clip-path:polygon(0 0, 0 0, 0 0, 0 0);}复制代码
特点：
视觉上的隐藏，隐藏元素的依然占据着空间，影响其他元素的布局
用户无法与其进行直接的交互
元素的内容可以被读屏软件读取（没有测试过）
通过DOM依然可以获取到该元素
其子孙元素无法通过重新设置对应的属性来显示
7. overflow
通过设置元素的宽高为 0 来隐藏元素。
.hide-overflow{width:0;height:0;overflow: hidden;}复制代码
必须加上 overflow: hidden ，否则其子孙元素依然可以显示，下面的动图可以说明：
特点：
视觉上的隐藏，隐藏元素的不会占据任何空间，不会影响其他元素的布局
用户无法与其进行直接的交互
元素的内容可以被读屏软件读取（没有测试过）
通过DOM依然可以获取到该元素
其子孙元素无法通过重新设置对应的属性来显示
8. transform
.hide-transform{transform:translate(-9999px, -9999px);}复制代码
或者
.hide-transform{transform:scale(0);}复制代码
特点：
视觉上的隐藏，隐藏元素的依然占据着空间，影响其他元素的布局
用户无法与其进行直接的交互
元素的内容可以被读屏软件读取（没有测试过）
通过DOM依然可以获取到该元素
其子孙元素无法通过重新设置对应的属性来显示
其他
如果是纯文本的隐藏，可以设置
.hide-text{text-indent: -9999px;}复制代码
或者
.hide-text{font-size:0;}复制代码
还有一个是 无障碍设计规范 里面的：
复制代码
差异性
上面简单的罗列了8中隐藏元素的方式，其实给我们视觉上的效果，这些方法都可以让元素不可见（也就是我们所说的隐藏）。然而，屏幕并不是唯一的输出机制，比如说屏幕上看不见的元素（隐藏的元素），其中一些依然能够被读屏软件阅读出来（因为读屏软件依赖于可访问性树来阐述）。为了消除它们之间的歧义，我们将其归为三大类：
完全隐藏
视觉上的隐藏
语义上的隐藏
三种类型的隐藏总结下来如下表所示：
可见性状态屏幕上可访问性树（读屏软件等）
完全隐藏隐藏隐藏
视觉上的隐藏隐藏可见
语义上的隐藏可见隐藏
完全隐藏
针对上面所列的8种方法，能够实现完全隐藏的只有下面这3种：
display: none
visibility: none
HTML5新增的hidden属性
视觉上的隐藏
opacity
position
transform
clip-path
overflow
语义上的隐藏
aria-hidden="true"
其他区别
隐藏方式占据原来的空间直接跟用户交互直接响应DOM事件
opacity是是是
visibility是否否
display否否否
hidden否否否
position否否否
clip-path是否否
overflow否否否
transform是否否
最后
感谢您的阅读，希望对你有所帮助。由于本人水平有限，如果文中有不当的地方烦请指正，感激不尽。
网友评论