在CSS中，要隐藏DOM元素常见的方法有：
- 设置元素的
opacity值为0 - 设置元素的
visibility值为hidden - 设置元素的
display值为none - 设置元素的
position值为absolute，并且将其移到不可见区域 - 设置元素
clip（在新的CSS中使用clip-path来替代clip）
除此之外，还可以使用：
- 设置元素的
hidden
上面隐藏元素的方法都是大家常见的，也是众所周之的。当然除此之外还有一些特殊的小技巧,比如说：
- 将元素的
font-size、line-height、width和height设置为0 - 设置元素的
transform的translateX或者translateY的值为-100%
当然，或许在你的实战经验当中，你还有别的方案。对于其他的方案，我们不再罗列，咱们具体来看看各种隐藏DOM元素的差异。
隐藏DOM元素的差异性
上面简单的罗列了八种隐藏DOM元素的方式，其实给我们视觉上的效果，这些方法都可以让元素不可见(也就是我们所说的隐藏)。然而，屏幕并不是唯一的输出机制，比如说，屏幕上看不见的元素(隐藏的元素)，但其中一些隐藏元素的方式在屏幕阅读器中并没有隐藏，它依然能被屏幕阅读器读出来（因为屏幕阅读器依赖于可访问性树来阐述）。为了消除它们之间的歧意，我们将使用以下条款：
- 完全隐藏：元素既不在屏幕上可见，而且也不暴露在可访问性树上
- 语义上隐藏：元素在屏幕上呈现，但不暴露在可访问性树上
- 视觉上隐藏：元素没有在屏幕上呈现，但是暴露在可访问性树上
如何完全隐藏元素
针对上面所列的隐藏元素方式当中，能完全隐藏元素的方法有三种：
- 通过CSS设置元素的
display属性值为none - 通过CSS设置元素的
visibility属性值为hidden - 通过HTML5元素的属性值
hidden（就是给元素声明一个hidden属性值），比如<div hidden>
虽然上面的几种方法得到的结果相同，即内容在屏幕上不可见，屏幕阅读器也无法读到(不在可访问性树上),但它们之间还是有所差别的。
给DOM元素设置display:none;来隐藏元素，将导致元素完全消失，而且不会占据任何的空间。如果通过visibility:hidden;隐藏元素，元素虽然消失了，但会占据空间(其占据的空间和元素的大小有直接关系)。