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

相关推荐
跟橙姐学代码11 小时前
Python 类的正确打开方式:从新手到进阶的第一步
前端·python·ipython
Jagger_11 小时前
SonarQube:提升代码质量的前后端解决方案
前端·后端·ai编程
Becauseofyou13711 小时前
如果你刚入门Three.js,这几个开源项目值得你去学习
前端·three.js
菜市口的跳脚长颌11 小时前
前端大文件上传全攻略(秒传、分片上传、断点续传、并发控制、进度展示)
前端
不一样的少年_11 小时前
同事以为要重写,我8行代码让 Vue 2 公共组件跑进 Vue 3
前端·javascript·vue.js
云枫晖11 小时前
JS核心知识-数据转换
前端·javascript
xuyanzhuqing11 小时前
代码共享方案-多仓库合并单仓库
前端
RaidenLiu11 小时前
Riverpod 3:重建控制的实践与性能优化指南
前端·flutter
学习中的小胖子11 小时前
React的闭包陷阱
前端
不卷的攻城狮11 小时前
【精通react】(五)react 函数时组件为什么需要 hooks?
前端