Skip to content
Have a clear structure

CSS 隐藏元素 🙈

1、设置 display: none

隐藏元素不再占有原来位置,因此会导致页面布局改变,引起重排 子元素无法通过设置 display: block 实现反隐藏 隐藏元素绑定的事件不会触发

2、设置 visibility: hidden

隐藏元素占有原来位置,实现的是视觉上的隐藏 子元素可通过设置 visibility: visible 显示自己 隐藏元素绑定的事件不会触发,如点击事件

3、设置 opacity: 0

通过设置透明度为 0 来隐藏元素,因此占有原来位置 子元素无法通过设置 opacity: 1 显示自己 opacity: 0 的元素仍然能触发已绑定的事件

4、利用绝对定位 position: absolute

将 top 和 left 设置为足够大的负数,使其离开屏幕,即可实现隐藏效果 只要我跑得够远,你就看不到我 😜 绝对定位的元素是脱标的,不会影响页面布局