目录
一、前言
在我们进行项目开发阶段，肯定会遇到很多需要隐藏元素的需求，并且每次遇到的需求都限制了我们需要特定的方法去隐藏元素。
如消消乐游戏中，当我们消除成功后，我们就不能使用display:none去隐藏元素。这样会导致后面的元素重新计算元素的位置，使位置发生错乱，这时我们就应该使用 visibility:hidden 来实现该效果。
二、隐藏页面元素的实现方法
1.利用display:none实现
这是我们比较常见的隐藏元素的方法，通过销毁元素，使元素彻底消失，不在占据位置，后面的元素会占据该元素占据的位置，所以一定会触发重排(回流)
具体实现:
未给第一个元素div设置display
<div class="red" style="width: 100px; height: 100px; background: red"></div>
<div class="green" style="width: 100px; height: 100px; background: green"></div>效果图如下
当给第一个元素设置display时，通过给第一个盒子设置display,并且测试给第一个盒子绑定点击事件，是否会触发。
<div id="red" style="display: none; width: 100px; height: 100px; background: red"></div>
<div id="green" style="width: 100px; height: 100px; background: green"></div>
<script>
let red = document.querySelector('#red');
red.addEventListener('click', function () {
console.log('1111');
});
</script> 
红色盒子彻底消失，后面的绿色盒子占据了红色盒子的位置，并且自定义事件不会触发
特点：元素不可见，不占据空间，无法响应点击事件
2.利用visibility:hidden隐藏元素
通过给元素设置为不可见达到隐藏元素的效果,元素还存在，只是设置为了不可见，所以只是触发了重绘，并不会触发重排。
当给第一个元素设置visibility:hidden时
<div id="red" style="visibility: hidden; width: 100px; height: 100px; background: red"></div>
<div id="green" style="width: 100px; height: 100px; background: green"></div>
<script>
let red = document.querySelector('#red');
red.addEventListener('click', function () {
console.log('1111');
});
</script>效果如下,点击空白处第一个元素位置，不能响应点击事件.
特点：元素不可见，占据页面空间，无法响应点击事件
3.利用opacity:0来隐藏元素
opacity属性:用来设置元素的透明度，它不仅对颜色有效，对图像或者页面中其它的元素也有效。
语法：
opacity:value | inherit
值 描述 value 规定不透明度，从0.0（完全透明）到 1.0 （完全不透明） inherit 应该从父元素继承opacity属性的值
通过将元素设置为完全透明（opacity:0）来达到隐藏元素的效果，会占据原有的位置，不一定会引起重绘
当给第一个元素设置opacity:0 时,达到的页面效果和visibility相同,但是通过点击第一个元素，会触发自定义事件。
特点：改变元素透明度，元素不可见，占据页面空间，可以响应点击事件
4.设置width,height属性为0隐藏元素
块级元素:块级元素会独占一行(即无法与其他元素显示在同一行内,同时块级元素必须设置宽高，才能正常显示。所以我们通过设置width,height为0可以达到隐藏元素的效果，页面上不显示元素且不占有位置，所以点击事件一定不会生效，且一定会触发重排（改变了元素怒的几何信息大小）
代码示例:
<div id="red" style="background: red; width: 0; height: 0"></div>
<div id="green" style="width: 100px; height: 100px; background: green"></div>
页面效果，只显示绿色盒子，第一个盒子不显示也没有占据位置，且不会出触发点击事件
特点：元素不可见，不占据页面空间，无法响应点击事件
5.利用绝对定位position:隐藏元素
实质上是将元素移除页面，达到隐藏元素的效果
#red {
position: absolute;
left: -99999px;
top: -99999px;
}三、display:none、visibility:hidden、opacity的区别
| display:none | visibility:hidden | opacity:0 | |
| 页面中是否存在 | 不存在 | 存在 | 存在 |
| 重排 | 会 | 不会 | 不会 |
| 重绘 | 会 | 会 | 不确定 |
| 自身绑定事件 | 不触发 | 不触发 | 可触发 |
| transition（动画） | 不支持 | 支持 | 支持 |
重排一定会引起重绘，但重绘不一定会引起重排（后面我会对重绘和重排进行详解）
四、小结
当我们遇到需要隐藏元素的场景时，可以考虑一下最终实现的效果，是否要显示元素，是否需要绑定自定义事件触发事件，是否需要增加动画效果（实现过渡效果）,同时还要考虑性能方面的问题（即是否会触发重排或者重绘），都是我们需要考虑的问题。
以上便是我总结的隐藏元素的方法及特点，欢迎大家讨论，一起学习。