72、隐藏元素的方法以及区别

1、隐藏元素的方法

1. display: none：渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。
2. visibility: hidden：元素在页面中仍占据空间，但是不会响应绑定的监听事件。
3. opacity: 0：将元素的透明度设置为 0，来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。
4. position: absolute：通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏，不会影响布局，能够响应元素绑定的监听事件。
5. z-index: 负值：来使其他元素遮盖住该元素，以此来实现隐藏。
6. transform: scale(0,0)：将元素缩放为 0，来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。
7. clip/clip-path ：使用元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。

2、总结

• visibility：影响布局（占据空间），影响交互（不会响应绑定事件）；
• opacity：影响布局（占据空间），不影响交互（会响应绑定事件）；
• display：不影响布局（不占据空间），影响交互；
• position：不影响布局，不影响交互；   

3、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的内容会被读取。