| 方法 | 表现 |
|---|---|
| display: none | 渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。 |
| visibility: hidden | 元素在页面中仍占据空间，但是不会响应绑定的监听事件。 |
| opacity: 0 | 将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。 |
| position: absolute | 通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。 |
| z-index: 负值 | 来使其他元素遮盖住该元素，以此来实现隐藏。 |
| clip/clip-path | 使用元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。 |
| transform: scale(0,0) | 将元素缩放为 0，来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。 |
display:none与visibility:hidden的区别：
1、在渲染树中
- display:none会让元素完全从渲染树中消失，渲染时不会占据任何空间；
- visibility:hidden不会让元素从渲染树中消失，渲染的元素还会占据相应的空间，只是内容不可见。
2、是否是继承属性
- display:none是非继承属性，子孙节点会随着父节点从渲染树消失，通过修改子孙节点的属性也无法显示；
- visibility:hidden是继承属性，子孙节点消失是由于继承了hidden，通过设置visibility:visible可以让子孙节点显示；
3、修改常规文档流中元素的 display 通常会造成文档的重排，但是修改visibility属性只会造成本元素的重绘；
4、使用读屏器时，设置为display:none的内容不会被读取，设置为visibility:hidden的内容会被读取。
