CSS 隐藏元素的方法总结

由于屏幕并不是唯一读取页面的输出机制，比如：屏幕上隐藏的元素，其中一些依然能够被读屏软件阅读出来（因为读屏软件依赖于可访问性树来阐述）。为了消除它们之间的歧义，所以我们将其归为三大类：

本文也将从这个角度来进行介绍，还会讲解这两道面试题：

1.完全隐藏的方法

完全隐藏：元素 Dom 节点会从渲染树消失，更不会占据空间，也不可被点击触发 click 事件。

设置display属性为 none，这样元素就被完全隐藏了。

这是 HTML5 新增属性，相当于 display: none，直接写在元素上面，如<div hidden></div>。

视觉上隐藏：元素依旧占据着位置，只是我们视觉上看不见而已, 但也可能会触发click事件。

opacity属性作用于元素时，会将元素和其内容当作一个整体，从而设置整体的透明度，还可与 transition 搭配使用，从而达到一个动态变化的效果。 opacity:0；将元素整体透明度设置为 0，视觉上就会变得不可见，但依旧占据空间，而且可以被点击触发 click 事件。

visibility 属性可控制元素的显示与隐藏，且不更改文档的布局，依旧占据空间，但当visibility:hidden时不可点击触发 click 事件。

设置 posoition 为 absolute 或 fixed，再通过设置 top、left 等值，将其移出可视区域。如：

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

通过设置 margin 值，将其移出可视区域范围（可视区域占位）。如：margin-left: -99999px;

将元素的 margin、border、padding、height 和 width 等影响元素盒模型的属性设为 0。如果元素内有子元素或内容，就设置其 overflow:hidden 来隐藏其子元素。

width: 0px;
height: 0px;
overflow: hidden; /*隐藏子元素*/

通过clip-path属性来剪裁元素，但这个属性比较新，浏览器兼容性比较差，大家了解一下即可。如：

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

语义上隐藏：使读屏软件不可读，但正常占据空间并且可见。

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

display 和 opacity 属性是非继承属性。
- display: none 元素的子孙节点消失的原因: 父元素从渲染树消失造成，从而子孙节点也无法显示。
- opacity: 0 元素的子孙节点消失的原因: opacity 属性会将元素和其内容当作一个整体来进行控制。
visibility 属性是继承属性。
- visibility: hidden 元素的子孙节点消失的原因是：子孙节点继承了 visibility: hidden。
- 我们可通过设置 visibility: visible;可以让子孙节点显式。

rgba()(red,green,blue,alpha)只作用于元素的颜色或背景色，rgba 属性是非继承属性。
transparent 关键字表示一个完全透明的颜色，即该颜色看上去将是背景色，相当于 rgba(0,0,0,0)的简写。
- 作为 background 属性的值时仅仅是将元素的背景色设为透明，而元素中的内容依旧可显示。
opacity 作用于元素，会将元素和其内容当作一个整体，从而设置整体的透明度。

这是我目前所了解的知识面中最好的解答，当然也有可能存在一定的误区。

所以如果对本文存在疑惑，可以在评论区留言，我会及时回复的，欢迎大家指出文中的错误观点。

最后码字不易，觉得有帮助的朋友点赞、收藏、关注走一波。