元素隐藏方法总结：

1. 如果希望元素不可见、不占据空间、资源会加载、DOM 可访问：display: none；

2. 如果希望元素不可见、不能点击、但占据空间、资源会加载，可以使用：visibility: hidden；

3. 如果希望元素不可见、不占据空间、显隐时可以又transition淡入淡出效果：

div{
  position: absolute;
  visibility: hidden;
  opacity: 0;
  transition: opacity .5s linear;
  background: cyan;
}
div.active{
  visibility: visible;
  opacity: 1;
}

这里使用visibility: hidden而不是display: none，是因为display: none会影响css3的transition过渡效果。
但是display: none并不会影响cssanimation动画的效果。

4. 如果希望元素不可见、可以点击、占据空间，可以使用：opacity: 0；

5. 如果希望元素不可见、可以点击、不占据空间，可以使用：opacity: 0; position: abolute;；

6. 如果希望元素不可见、不能点击、占据空间，可以使用：position: relative; z-index: -1;；

7. 如果希望元素不可见、不能点击、不占据空间，可以使用：position: absolute ; z-index: -1;；

元素隐藏方法总结：

原文：https://www.cnblogs.com/bobo1/p/12370201.html