——这个系列是对自己最近复习的知识点的总结，便于快速回顾记忆，如果有帮助，不妨点个赞哈！
一直都想对这个琐碎的知识点进行总结，因为种种原因被耽搁了现在补上。
1.display:none;
div{ display:none }
首先引用一下mdn 中的描述
display: none
在一个元素中使用 display 的值为 none 将会从无障碍树中移除它。这将导致该元素及其所有后代元素不再通过屏幕阅读器技术展示。
如果你想要从视觉上隐藏元素，一个更好的替代方案是使用属性的组合将其直观地从屏幕删除，但是通过屏幕阅读器等辅助技术依然可以解析。
使用display:none,
- 该元素的dom 节点是存在的
- 但是不在文档流中占据位置，
- 并且不会触发任何事件。
缺点
显然它的缺点是很明显的，由于不存在于文档流中，如果一个元素频繁的采用这种方式来，显示隐藏，就会让浏览器一直不停的重排与重绘，重排对浏览器性能造成影响较大，所以mdn 也推荐一般采用其他方式去隐藏。
2.visibility:hidden
如果频繁的切换就可以采用这种方式。
就是处于隐藏状态中，
- 隐藏元素还是占据位置，
- 那么在频繁切换中，浏览器只会进行重绘，不会重排。
- 并且不会触发任何事件。
3 更改透明度
- rgba,
- opacity
div {
color: rgba(0,0,0,0);
background-color: rgba(0,0,0,0);
}
div {
opacity: 0;
}
由此可见，他们和visibility:hidden。一样都占据空间，不一样的是，
- 他们可以触发事件，
- 可以支持动画的渐变效果。
- 性能也是不错的。
- 缺点是浏览器兼容性，不如上面，1,2。
4 更改层级
div {
z-index: -1;
}
- 脱离标准文档流了，性能不错。
- 不能触发事件。
5 补充，v-if，v-show
v-show 相当于 display：none, 然而 v-if 和上面所以隐藏的方式都不一样，他是直接删除了dom 节点。虚拟dom 转化为真实dom 时候应该没有去构建这个节点。
