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

相关推荐
Rsun045511 天前
React相关面试题
前端·react.js·前端框架
鹏多多.1 天前
Flutter使用screenshot进行截屏和截长图以及分享保存的全流程指南
android·前端·flutter·ios·前端框架
LawrenceLan1 天前
37.Flutter 零基础入门(三十七):SnackBar 与提示信息 —— 页面反馈与用户交互必学
开发语言·前端·flutter·dart
怪侠_岭南一只猿1 天前
爬虫工程师入门阶段一:基础知识点完全学习文档
css·爬虫·python·学习·html
迪巴拉15251 天前
基于Vue与Spring Boot+Open Cv的智慧校园考勤系统
前端·vue.js·spring boot
swipe1 天前
JavaScript 对象与属性描述符:从原理到实战
前端·javascript·面试
&活在当下&1 天前
Vue3 h函数用法详解
前端·javascript·vue.js
小贵子的博客1 天前
(vue3错误处理)has naming conflicts with other components, ignored.
前端·javascript·vue.js