CSS 隐藏元素 🙈
1、设置 display: none
隐藏元素不再占有原来位置,因此会导致页面布局改变,引起重排 子元素无法通过设置 display: block 实现反隐藏 隐藏元素绑定的事件不会触发
2、设置 visibility: hidden
隐藏元素占有原来位置,实现的是视觉上的隐藏 子元素可通过设置 visibility: visible 显示自己 隐藏元素绑定的事件不会触发,如点击事件
3、设置 opacity: 0
通过设置透明度为 0 来隐藏元素,因此占有原来位置 子元素无法通过设置 opacity: 1 显示自己 opacity: 0 的元素仍然能触发已绑定的事件
4、利用绝对定位 position: absolute
将 top 和 left 设置为足够大的负数,使其离开屏幕,即可实现隐藏效果 只要我跑得够远,你就看不到我 😜 绝对定位的元素是脱标的,不会影响页面布局