隐藏页面的元素的方式

简介: 隐藏页面的元素的方式

五种方式:

display:none 【将元素完全隐藏,不会占据页面空间】

visibility:hidden 【将元素隐藏,但仍会占据页面空间】

opacity:0 【将元素透明度设置为0,仍占据页面空间】

position:absolute或者fixed,left/top设置为足够远的负值或者像素值

transform:scal(0) 【将元素缩放到0大小,仍然占据页面空间】

display:none 【将元素完全隐藏,不会占据页面空间】

.element {
  display: none;
}

visibility:hidden 【将元素隐藏,但仍会占据页面空间】

.element {
  visibility: hidden;
}

opacity:0 【将元素透明度设置为0,仍占据页面空间】

.element {
  opacity: 0;
}

position:absolute或者fixed,left/top设置为足够远的负值或者像素值

.element {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

transform:scal(0) 【将元素缩放到0大小,仍然占据页面空间】

.element {
  transform: scale(0);
}


相关文章
510特辑 | 读懂阿里日,也就读懂了阿里
510特辑 | 读懂阿里日,也就读懂了阿里
1616 0
|
自动驾驶 定位技术 vr&ar
航空摄影测量设备科普
航空摄影测量设备科普
421 0
allegro如何看元器件的高度
allegro如何看元器件的高度
962 0
|
缓存 负载均衡 应用服务中间件
在Linux中,LVS与nginx有何区别?
在Linux中,LVS与nginx有何区别?
|
自然语言处理 算法 PyTorch
一句话塑造一个3D形象,文本生成3D头部模型魔搭最佳实践
高保真 3D 人脸重建在许多场景中都有广泛的应用,例如 AR/VR、医疗、电影制作等。尽管大量的工作已经使用 LightStage 等专业硬件实现了出色的重建效果,从单一或稀疏视角的单目图像估计高精细的面部模型仍然是一个具有挑战性的任务。
|
监控 Java Spring
AOP切入同类调用方法不起作用,AopContext.currentProxy()帮你解决这个坑
AOP切入同类调用方法不起作用,AopContext.currentProxy()帮你解决这个坑
1427 1
|
JSON 算法 数据可视化
Open3d-Point cloud (点云)
Open3d-Point cloud (点云)
1400 6
|
SQL 安全 Linux
BUUCTF:Basic 解析(一)
BUUCTF:Basic 解析(一)
若依的目录结构,有三种一种目录菜单,目录菜单,展开的都是页面的功能,不会跳转,第二种页面菜单,目录里面的一点击都是展示页面,第三种是按钮菜单,点击之后
若依的目录结构,有三种一种目录菜单,目录菜单,展开的都是页面的功能,不会跳转,第二种页面菜单,目录里面的一点击都是展示页面,第三种是按钮菜单,点击之后
|
Python
Python自动化办公实战案例:文件整理与邮件发送
Python自动化办公实战案例:文件整理与邮件发送
320 0