css如何隐藏一个元素

方式 占据空间 触发事件
display:none
visibility:hidden
opacity:0
position:absolute
z-index:-1
transform:scale(0,0)

✅❌

display: none: 渲染树不会包含该染对象,因此该元素不会在页面中占据位置,也不会响应绑定的监听事件。

visibility: hidden: 元素在页面中仍占据空间,但是不会响应绑定的监听事件

opacity: 0: 将元素的透明度设置为 0,以此来实现元素的隐藏。元素在页面中仍然占据空间,并且能够响应元素绑定的监听事件

position: absolute: 通过使用绝对定位将元素移除可视区域内

z-index: 负值: 来使其他元素遍盖住该元素

transform: scale(0,0): 将元索缩放为 0

相关推荐
棋丶36 分钟前
VUE2和VUE3的区别
开发语言·前端·javascript
screct_demo1 小时前
详细讲一下Vue的路由Vue Router的安装,配置,基础用法和详细用法以及实践中应用
前端·javascript·vue.js
林涧泣1 小时前
【Uniapp-Vue3】使用ref定义响应式数据变量
前端·vue.js·uni-app
PieroPc2 小时前
特制一个自己的UI库,只用CSS、图标、emoji图 日后慢用!!!
javascript·css·ui
HelloZheQ2 小时前
CSS 变量:让你的样式更灵活、更易维护
前端·css·tensorflow
♟彦♟3 小时前
web-前端小实验2
前端
G_qingxin3 小时前
前端排序算法
前端·算法·排序算法
He guolin3 小时前
[Vue]的快速上手
前端·javascript·vue.js
flying robot3 小时前
Rust的对web生态的影响
开发语言·前端·rust
艾斯特_3 小时前
window.open 被浏览器拦截解决方案
前端·javascript