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

相关推荐
问心无愧05131 天前
ctf show web入门160 161
前端·笔记
李小白661 天前
第四天-WEB服务器基本原理,IIS服务
运维·服务器·前端
humcomm1 天前
AI编程时代新前端职位
前端·ai编程
好家伙VCC1 天前
Web Components主题热切换方案揭秘
java·前端
甲维斯1 天前
Kimi版超级玛丽效果“惊人”,配额不足5厘米!
前端·人工智能
hboot1 天前
AI工程师第一课 - Python
前端·后端·python
凉菜凉凉1 天前
AI时代,被抛弃的前端
前端·ai
console.log('npc')1 天前
AI前端工程与生成式UI学习路线
前端·人工智能·ui
梦曦i1 天前
uni-router v1.1.1发布:守卫超时保护+路由监听
前端·uni-app
qq_2518364571 天前
基于java Web网络订餐系统设计与实现 源码文档
java·开发语言·前端