css基础知识五:CSS中,有哪些方式可以隐藏页面元素?区别?

news2024/11/23 18:46:55

在这里插入图片描述
一、前言

在平常的样式排版中,我们经常遇到将某个模块隐藏的场景

通过css隐藏元素的方法有很多种,它们看起来实现的效果是一致的

但实际上每一种方法都有一丝轻微的不同,这些不同决定了在一些特定场合下使用哪一种方法

二、实现方式

通过css实现隐藏元素方法有如下:

  • display:none
  • visibility:hidden
  • opacity:0
  • 设置height、width模型属性为0
  • position:absolute
  • clip-path

display:none

设置元素的display为none是最常用的隐藏元素的方法

.hide {
display:none;
}

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

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

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

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

visibility:hidden

设置元素的visibility为hidden也是一种常用的隐藏元素的方法

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

.hidden{
visibility:hidden
}

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

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

opacity:0

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

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

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

.transparent {
opacity:0;
}

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

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

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

设置height、width属性为0

将元素的margin,border,padding,height和width等影响元素盒模型的属性设置成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:none和visibility:hidden,其他的方式只能认为是奇招,它们的真正用途并不是用于隐藏元素,所以并不推荐使用它们

三、区别

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

在这里插入图片描述

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

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

相关文章

【IC设计】ICC1 workshop lab guide 学习笔记——Lab 2 Design Planning Task1-4

文章目录 Lab 2 Design Planning2.1 Load the Design2.2 Initialize the Floorplan2.3 Preplace the Macros Connected to I/O Pads2.4 Perform Virtual Flat Placement Lab 2 Design Planning 2.1 Load the Design 进入lab2_dp目录并打开icc_shell,打开orca_lib.…

雪花去噪算法学习记录(一)之基础知识

在进行实验过程中,需要完成对雪天图像的处理,其中一个主要操作为去雪。相较于去雾,去雨模型,去雪模型相对较少,因此在研究时所能够借鉴的资料有限,这对我们的研究造成了一定困扰。 模型算法 DesnowNet网络…

[VPN]华为SecoClient客户端Linux使用

准备 安装环境:CentOS 下载安装包: # wget http://www.corem.com.cn/sites/default/files/tools/secoclient/secoclient-linux-64-7.0.2.26.run 安装 在root用户下,执行: # chmod x secoclient-linux-64-7.0.2.26.run # ./secoc…

瞎搞!你真的懂什么是ERP、中台、低代码吗?

企业数字化领域从来都不缺新概念 从制造资源计划到中台,企业MRP报表数字还没对齐,就要忙着“去烟囱”化; 从中台到低代码,企业“数据孤岛”还没打通,又要忙着“赋能数字化能力”给业务人员了。 这一来二去,…

已有仓库,上传代码,如果你是先写代码,想上传git上你可以这样操作

已有仓库,上传代码,如果你是先写代码,想上传git上你可以这样操作 第一步:初始化 git git init 第二步:添加文件 git add * 第三步:提交文件 git commit -m "完整项目可直接下载使用" 第四步:配置…

【MySql】MySql索引的操作

文章目录 索引结构问题聚簇索引与非聚簇索引索引操作创建主键索引唯一索引创建普通索引创建全文索引创建删除索引查询索引索引创建原则 索引结构问题 InnoDB 在建立索引结构来管理数据的时候,其他数据结构为何不行 链表:线性遍历,在效率上是不合适的 二叉搜索树&am…

如何用Jmeter提取和引用Token

1.执行获取token接口 在结果树这里,使用$符号提取token值。 $根节点,$.data.token表示提取根节点下的data节点下的token节点的值。 2.使用json提取器,提取token 变量路径就是把在结果树提取的路径写上。 3.使用BeanShell取样器或者BeanShell后…

在 Navicat Premium 中管理 MySQL 用户 | 第 2 部分:创建新用户

第 2 部分:创建新用户 第 2 部分:创建新用户 第 1 部分 中,我们学习了如何使用 Navicat Premium 用户管理工具保护 MySQL 的 root 帐号。本篇文章将集中介绍如何设置新用户的帐号详细信息、帐号限制和 SSL 设置。如果你想边学边用&#xff1…

做好用户体验设计 关键看5个方面

用户来了就走,用户吐槽不好用,用户留不住,好的功能没人用,这到底是怎么回事?问题关键在于好的用户体验设计,而做好用户体验设计,关键看5个方面: 1、是否有用 我们需要考量产品。对用…

如何用数字人技术让课堂活起来?番职院和3DCAT实时云渲染给出答案

2023年4月20日,广州市第二届智慧教育成果巡展活动在番禺职业技术学院(下文简称番职院)举行,本次活动的主题是智能AI助教—让课堂活起来。 活动现场,瑞云科技受邀展示了其自主研发的瑞云数字人课堂互动教学解决方案。数…

实时监控Active Directory用户登录操作

用户登录到其域计算机是任何企业中发生的日常活动。一开始,这可能看起来是一个简单的Active Directory事件,但分配了不同角色的管理员可以将这些有价值的数据用于各种审计,合规性和运营需求。组织需要审核“AD 用户登录日志”的详细信息&…

JavaWeb学习路线(5)——MyBatis

准备工作:JDBC 概念: JDBC(Java DataBase Connectivity),就是使用Java语言操作关系型数据库的一套API。JDBC使用数据库的五大步骤 //步骤一:注册驱动 Class.forName("com.mysql.cj.jdbc.Driver"…

手机App弹窗的常用测试点

手机App弹窗是目前流行的一种内容展示形式,根据内容性质可以划分为消息、通知、广告、营销等等,展现形式也比较多变,刚上手测试特容易手忙脚乱,为了帮助新人能够快速入门,笔者在此将弹窗常见的测试点一一进行罗列&…

「网络编程」第二讲:网络编程socket套接字(三)_ 简单TCP网络通信程序的实现

「前言」文章是关于网络编程的socket套接字方面的,上一篇是网络编程socket套接字(二),下面开始讲解! 「归属专栏」网络编程 「笔者」枫叶先生(fy) 「座右铭」前行路上修真我 「枫叶先生有点文青病」「每篇一句」 I do…

maven-mvnd搞起来

maven-mvnd是Apache Maven团队借鉴了Gradle和Takari的优点,衍生出来的更快的构建工具,maven的强化版! maven-mvnd 在设计上,使用一个或多个守护进程来构建服务,以此来达到并行的目的!同时,mave…

FreeRTOS 创建任务

例子:创建一个任务,并在任务里面翻转LED 灯 1. 函数原型 BaseType_t xTaskCreate(TaskFunction_t pxTaskCode,const char * const pcName,const uint16_t usStackDepth,void * const pvParameters,UBaseType_t uxPriority,TaskHandle_t * const pxCreat…

STM32的定时器详解(嵌入式学习)

STM32的定时器详解 0. 前言1. Systick定时器概念工作原理时钟基准Systick练习 2. HAL_Delay函数分析3. 定时器基本概念定时器分类定时器组成计数器自动重装寄存器预分频器 定时器计数原理定时器练习 4. 软件定时器概念设计思想代码 0. 前言 想要了解STM32的时钟系统 点击这里跳…

【数据分享】1929-2022年全球站点的逐日平均风速数据(Shp\Excel\12000个站点)

气象数据是在各项研究中都经常使用的数据,气象指标包括气温、风速、降水、能见度等指标,说到气象数据,最详细的气象数据是具体到气象监测站点的数据! 对于具体到监测站点的气象数据,之前我们分享过1929-2022年全球气象…

考上了!成为图技术大师的第一步!

好消息!! 自创邻科技GBCA课程开设以来 截至6月20日 已有近20名学员通过考试 获得GBCA认证证书! 距离成为图技术认证专家 跨出关键一步! 前不久,创邻科技为了让更多图技术爱好者能够快速了解、上手图数据库&#xff0c…

【一些随笔】艰难存折,恨不睡觉:大话年轻人的钱包囧境与梦想退休

一些随笔 1️⃣ 存钱难吗?难!它难在哪?2️⃣ 关于年轻人如何攒钱理财的一点建议3️⃣ 关于裸辞的一些经验及看法4️⃣ 谁又不想攒够钱了提前退休呢?但要存够多少呢? 1️⃣ 存钱难吗?难!它难在哪…