.hide-opacity {opacity: 0;} copy the code
Gif by the following chart, we can conclude opacity hide elements have the following characteristics:
opacity: 1
2. visibility
.hide-visibility {visibility: hidden;} copy the code
By following gif action figure, we can conclude that the same elements visibility hidden features:
visibility: visible
3. display
It is a hidden element in the true sense.
.hide-display {display: none;} copy the code
By following gif action figure, we can conclude that display: none to hide elements of features:
display: blocktransition
4. hidden
The new HTML5 hidden attribute can be directly hidden element.
I was copy the code hidden element
Features:
Performance consistent with the display.
5. position
.hide-position {position: absolute; top: -9999px; left: -9999px;} copy the code
Features:
Hide visual, actually displayed outside the viewing area of the screen, will not take up space, does not affect the layout of other elements
Users can not interact directly with their
Content elements can be screen-reading software to read (not tested)
Still can get to the element through DOM
Its descendant elements can not be displayed by re-setting the attribute corresponding to
6. clip-path
To achieve hidden by cutting elements.
.hide-clip {clip-path: polygon (0 0, 0 0, 0 0, 0 0);} copy the code
Features:
Hide visual, hidden elements still occupy space, affect the layout of other elements
Users can not interact directly with their
Content elements can be screen-reading software to read (not tested)
Still can get to the element through DOM
Its descendant elements can not be displayed by re-setting the attribute corresponding to
7. overflow
By setting the width and height of elements to hide element is 0.
.hide-overflow{width:0;height:0;overflow: hidden;}复制代码
You must add overflow: hidden, or their children and grandchildren can still display elements, the following action figure can be explained:
Features:
Hide visual, hidden element does not occupy any space, it does not affect the layout of other elements
Users can not interact directly with their
Content elements can be screen-reading software to read (not tested)
Still can get to the element through DOM
Its descendant elements can not be displayed by re-setting the attribute corresponding to
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是否否
最后
感谢您的阅读，希望对你有所帮助。由于本人水平有限，如果文中有不当的地方烦请指正，感激不尽。
Reproduced in: https: //www.jianshu.com/p/4691c4bcd6d3