【前端学习——css篇】3.隐藏元素的方法

https://github.com/febobo/web-interview

3.隐藏元素的方法

diplay:none;  元素在页面消失,并且不占据页面空间
opacity:0;  设置元素透明度,仅元素不可见,占用空间
visibility:hidden;  元素不可见,占据页面空间,无法响应点击事件position:absolute; 从当前位置踢出去
clip-path 将元素裁剪掉
设置height、width模型属性为0 元素存在当看不见
①display:none

设置元素的displaynone是最常用的隐藏元素的方法

.hide {display:none;
}

将元素设置为display:none后,元素在页面上将彻底消失

元素本身占有的空间就会被其他元素占有,也就是说它会导致浏览器的重排和重绘

消失后,自身绑定的事件不会触发,也不会有过渡效果

特点:元素不可见,不占据空间,无法响应点击事件

②visibility:hidden

设置元素的visibilityhidden也是一种常用的隐藏元素的方法

从页面上仅仅是隐藏该元素,DOM结果均会存在,只是当时在一个不可见的状态,不会触发重排,但是会触发重绘

.hidden{visibility:hidden
}

给人的效果是隐藏了,所以他自身的事件不会触发

特点:元素不可见,占据页面空间,无法响应点击事件

③opacity:0

opacity属性表示元素的透明度,将元素的透明度设置为0后,在我们用户眼中,元素也是隐藏的

不会引发重排,一般情况下也会引发重绘

如果利用 animation 动画,对 opacity 做变化(animation会默认触发GPU加速),则只会触发 GPU 层面的 composite,不会触发重绘

.transparent {opacity:0;
}

由于其仍然是存在于页面上的,所以他自身的的事件仍然是可以触发的,但被他遮挡的元素是不能触发其事件的

需要注意的是:其子元素不能设置opacity来达到显示的效果

特点:改变元素透明度,元素不可见,占据页面空间,可以响应点击事件

④ 设置height、width属性为0

将元素的marginborderpaddingheightwidth等影响元素盒模型的属性设置成0,如果元素内有子元素或内容,还应该设置其overflow:hidden来隐藏其子元素

.hiddenBox {margin:0;     border:0;padding:0;height:0;width:0;overflow:hidden;
}

特点:元素不可见,不占据页面空间,无法响应点击事件

⑤position:absolute

将元素移出可视区域

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

特点:元素不可见,不影响页面布局

⑥clip-path

通过裁剪的形式

.hide {clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}

特点:元素不可见,占据页面空间,无法响应点击事件

小结

最常用的还是display:nonevisibility:hidden,其他的方式只能认为是奇招,它们的真正用途并不是用于隐藏元素,所以并不推荐使用它们。

区别

关于display: none visibility: hiddenopacity: 0的区别,如下表所示:

display: nonevisibility: hiddenopacity: 0
页面中不存在存在存在
重排不会不会
重绘不一定
自身绑定事件不触发不触发可触发
transition不支持支持支持
子元素可复原不能不能
被遮挡的元素可触发事件不能

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/774454.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何用OBD创建OceanBase集群

OBD创建集群的方式适用于迅速搭建集群以进行测试工作。但是在涉及线上环境的部署时,推荐采用OCP进行集群的创建与管理。 有关OBD 的一些详细信息,可以去 github 了解,GitHub - oceanbase/obdeploy: A deployer and package manager for Ocea…

东方博宜 1521. 计算分数加减表达式的值

东方博宜 1521. 计算分数加减表达式的值 #include<iostream> #include<iomanip> using namespace std; int main() {double n ;cin >> n ;double sum ;sum 0.0 ;double j ;j 1.0 ;for (int i 1 ; i < n ; i){sum 1.0 / i * j ; j * -1 ;}cout <…

C++进阶学习(3)类类型转换

文章目录 一、类类型转换1.构造函数构造2.类型转换函数 一、类类型转换 数据类型转换在程序编译时或在程序运行实现 基本类型 ←→ 基本类型 基本类型 ←→ 类类型 类类型 ←→ 类类型 类对象的类型转换可由两种方式说明&#xff1a; 构造函数 转换函数 称为用户定义的类型转…

计算机网络01-20

计算机网络01-20 以下是本文参考的资料 欢迎大家查收原版 本版本仅作个人笔记使用1、OSI 的七层模型分别是&#xff1f;各自的功能是什么&#xff1f;2、说一下一次完整的HTTP请求过程包括哪些内容&#xff1f;孤单小弟 —— HTTP真实地址查询 —— DNS指南好帮手 —— 协议栈可…

Docker进阶:Docker Swarm —弹性伸缩调整服务的副本数量

Docker进阶&#xff1a;Docker Swarm —弹性伸缩调整服务的副本数量 1、 创建一个Nginx服务&#xff08;Manager节点&#xff09;2、查看服务状态&#xff08;Manager节点&#xff09;3、测试访问&#xff08;Worker节点&#xff09;4、查看服务日志&#xff08;Manager节点&am…

详解智慧路灯杆网关的集中供电能力

智慧路灯杆网关是智慧杆物联网系统中不可或缺的设备。智慧杆网关不仅可以作为杆载设备与云平台、设备与设备之间的桥梁&#xff0c;促进数据的无缝传输&#xff0c;而且还能提供高效的能源管理和供电功能。 BMG8200系列交流型智慧路灯杆网关就集成了强大的供电能力&#xff0c;…

浅析扩散模型与图像生成【应用篇】(十三)——PITI

13. Pretraining is All You Need for Image-to-Image Translation 该文提出一种基于预训练扩散模型的图像转换方法&#xff0c;称为PITI。其思想并不复杂&#xff0c;就是借鉴现有视觉和NLP领域中常见的预训练方法&#xff0c;考虑预先在一个大规模的任务无关数据集上对扩散模…

nginx学习记录-反向代理

1. 反向代理 一个简单的反向代理示意图如下&#xff1a; 我们的PC需要访问内网资源时&#xff0c;网关路由不直接将请求转发给内网的应用服务器&#xff0c;而是通过nginx服务器进行代理转发&#xff0c;转发到应用服务器上&#xff0c;应用服务器响应请求后会将响应数据再通过…

hdlbits系列verilog解答(Mux256to1v)-64

文章目录 一、问题描述二、verilog源码三、仿真结果一、问题描述 本节我们创建一个 4 位宽、256:1 的多路复用器。256 个 4 位输入全部封装到单个 1024 位输入向量中。sel=0 应选择位 in[3:0] ,sel=1 选择位 in[7:4] ,sel=2 选择位 in[11:8] ,以此类推。 模块声明 module…

AJAX~

概念:AJAX(Asynchronous JavaScript And XML):异步的JavaScript和XML AJAX作用&#xff1a; 1.与服务器进行数据交换:通过AJAX可以给服务器发送请求&#xff0c;并获取服务器响应的数据 使用了AJAX和服务器进行通信&#xff0c;就可以使用HTMLAJAX来替换JSP页面了 2&#xf…

【MATLAB源码-第170期】基于matlab的BP神经网络股票价格预测GUI界面附带详细文档说明。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 基于BP神经网络的股票价格预测是一种利用人工神经网络中的反向传播&#xff08;Backpropagation&#xff0c;简称BP&#xff09;算法来预测股票市场价格变化的技术。这种方法通过模拟人脑的处理方式&#xff0c;尝试捕捉股票…

欧美用户真实反馈!他们为什么选择爱可声助听器?

在竞争激烈的助听器市场上&#xff0c;爱可声助听器在欧美地区赢得了广泛的认可和好评。为什么越来越多的欧美用户选择爱可声助听器呢&#xff1f; 约翰&#xff0c;纽约的退休音乐教师 约翰是一位热爱音乐的退休音乐教师&#xff0c;他的一生都与音乐相伴&#xff0c;从年轻…

前端适配方案

rem 单位实际上既不是响应式布局、也不是流式布局或弹性布局的概念。rem 是一种相对长度单位&#xff0c;它是相对于根元素&#xff08;html 元素&#xff09;的字体大小来计算实际长度的单位。 响应式布局、弹性布局和流式布局是网页设计中常用的三种布局方式&#xff0c;它们…

常用的AD规则设置

目录 规则编辑器&#xff1a; 间距规则&#xff1a; 线宽规则&#xff1a; 过孔规则&#xff1a; 铺铜设置&#xff1a; 生成制造过孔&#xff1a; 过孔之间间距&#xff1a; 最小阻焊层间距&#xff1a; 丝印到阻焊的距离&#xff1a; 丝印到丝印距离&#xff1a; 走…

【洛谷 P1101】单词方阵 题解(dfs深度优先搜索)

题目描述 给一 nn 的字母方阵&#xff0c;内可能蕴含多个 yizhong 单词。单词在方阵中是沿着同一方向连续摆放的。摆放可沿着 88 个方向的任一方向&#xff0c;同一单词摆放时不再改变方向&#xff0c;单词与单词之间可以交叉&#xff0c;因此有可能共用字母。输出时&#xff…

01使用调试工具

文章目录 前言一、用openocd打开单片机二、利用4444端口向单片机写入hex文件三、利用3333端口和gdb进行调试四、之前我出的问题总结 前言 之前写了一篇关于在linux下搭建stm32标准库的文章后&#xff0c;有一些小伙伴们还是出现了一些奇奇怪怪的错误&#xff0c;这一篇文章就是…

JDK21|借鉴了近十种语言,String终于变好用了

作者:鱼仔 博客首页: https://codeease.top 公众号:Java鱼仔 前言 要想看官方对于JDK21的更新说明&#xff0c;可以直接跳转到下面这个官方网站中 官网地址为&#xff1a;https://openjdk.org/projects/jdk/21/ JDK21是最新的LTS版本&#xff0c;里面添加了不少新的特性&…

Java常用Lambda表达式

定义&#xff1a; Lambda表达式是一种在编程语言中表示匿名函数的方法。它可以在需要函数作为参数的地方使用&#xff0c;并且可以简洁地表示一个函数的定义。Lambda表达式最初由函数式编程语言引入&#xff0c;但现在已经成为许多编程语言中的常见特性。 基本语法&#xff1a;…

14个Python自动化实战脚本

1、批量文件重命名神器在工作中&#xff0c;我们常常需要对大量文件进行批量重命名&#xff0c;Python帮你轻松搞定&#xff01; import os def batch_rename(path, prefix, suffix):for i, filename in enumerate(os.listdir(path)):new_name f"{prefix}{i:03d}{suffix…

YOLOv9改进策略:IoU优化 | Wasserstein Distance Loss,助力小目标涨点

&#x1f4a1;&#x1f4a1;&#x1f4a1;本文独家改进&#xff1a;基于Wasserstein距离的小目标检测评估方法 Wasserstein Distance Loss | 亲测在多个数据集能够实现涨点&#xff0c;对小目标、遮挡物性能提升明显 &#x1f4a1;&#x1f4a1;&#x1f4a1;MS COCO和PASC…