隐藏元素的方法以及区别？
一、display:none
display: none/block
对于display 这个元素时常会在代码中使用到，类似下拉中的提示，相同元素相同点的合并。
使用display:none 会让对应元素从页面上消失，DOM结构会消失，所以一定会触发页面的重排重绘，所以不适合非常频繁地到显示隐藏元素。并且由于其消失后，自身绑定的事件更加不会去触发，也不能有过渡效果，其等于从页面上消失，所以被遮挡的元素不受到影响，依然可以正常进行操作。
二、visibility:hidden
visibility: hidden/visible
页面上展示的是隐藏后的效果，DOM中该元素是存在的，只是这时候在一个不可见的状态，只会触发重绘，不会重排，并且在展示上是隐藏了，隐藏后，被遮挡住的元素就可以正常的触发其对应的事件。
常常用作频繁的显示和隐藏
三、opacity:0
opacity:0
这个属性就是使用浏览器对alpha数值的更改来达到隐藏遮蔽的效果，相当于元素还存在，只是透明了，我们看不见而已，不会引发重排与重绘，但是相当于透明，其自身事件还是可以触发出来的，被其遮挡的元素是不会触发其事件的。
四、补充：重排与重绘
上面提到了重绘与重排，这里就简单的分享下，对重排与重绘的理解。
4.1 重排
概念：当DOM的变化影响了元素的位置和尺寸大小，浏览器需要重新对集合元素进行计算元素，并且将其安放在界面中的正确位置，这个过程叫重排序。说的简单点就是重新生成布局，重新对元素进行排列。
常见的发生重排的情况：
- 页面初始化渲染
- 修改可视DOM元素（添加、删除等）
- 修改元素的位置、尺寸（宽度、高度、边距等）
- 修改元素内容、字体大小
- 修改浏览器窗口大小
4.2 重绘
概念：当元素的可视外观发生改变，而且没有改变布局，重新把元素的外观绘制出来，就是重绘。
- 重绘：某些元素的外观被改变。
- 重排：重新生成布局，重新排列元素。
