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

相关推荐
bin915315 分钟前
DeepSeek 助力 Vue 开发:打造丝滑的进度条
前端·javascript·vue.js·deepseek
轻口味18 分钟前
Vue.js 与第三方插件的集成
前端·javascript·vue.js
斯~内克1 小时前
现代前端开发的演进与未来趋势:从工具革新到技术突破
前端
Loong_DQX1 小时前
[前端] axios网络请求二次封装
前端·axios·ts
还是鼠鼠2 小时前
(案例)如何使用 XMLHttpRequest 发送带查询参数的请求查询地区
前端·javascript·vscode·ajax·前端框架·html5
禁默2 小时前
HTML全局属性与Meta元信息详解:优化网页的灵魂
前端·html
码递夫2 小时前
npm运行Vue项目报错 error:0308010c:digital envelope routines::unsupported
前端·javascript·vue.js·npm
前端郭德纲2 小时前
写一个鼠标拖尾特效
前端·javascript
艾斯特_2 小时前
前端设计模式介绍及案例(单例模式、代理模式、工厂模式、装饰者模式、观察者模式)
前端·javascript·观察者模式·单例模式·设计模式
Zaralike3 小时前
关于浏览器缓存的思考
前端