隐藏元素的方法
1. display：none
渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置
2. visibility：hidden
元素在页面中仍占据空间
3. opacity: 0
将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间
4. position: absolute
通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。
5. z-index:
负值来使其他元素遮盖住该元素，以此来实现隐藏。
6. clip/clip-path
使用元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置
7. transform: scale(0,0)
将元素缩放为 0，来实现元素的隐藏。这种方法下，元素仍在页面中占据位置
display:none与visibility:hidden的区别
两者区别如下：
1. 在渲染树中
- display:none 会让元素完全从渲染树中消失，渲染时不会占据任何空间；
- visibility:hidden 不会让元素从渲染树中消失，渲染的元素还会占据相应的空间，只是内容不可见。
2. 是否是继承属性
- display:none 是非继承属性，子孙节点会随着父节点从渲染树消失，通过修改子孙节点的属性也无法显示；
- visibility:hidden 是继承属性，子孙节点消失是由于继承了hidden，通过设置 visibility:visible 可以让子孙节点显示；
