CSS—隐藏元素：1分钟掌握与使用隐藏元素的方法
个人博客：haichenyi.com。感谢关注
1. 目录
- 1–目录
- 2–display:none
- 3–visibility: hidden
- 4–opacity: 0
- 5–position: absolute;与 left: -9999px;
- 6–z-index 和 position
- 7–clip-path: circle(0%)
2. display:none
标签会挂载在html中，但是不会在页面上显示，也不会占用页面的空间
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><link rel="icon" href="/favicon.ico"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS隐藏元素的方法</title><style>.displayNone {display: none;}</style>
</head><body><div>哈哈哈哈</div><div class="displayNone">displayNone</div><div>哈哈哈哈</div>
</body></html>
下面是没有display:none的效果图
3. visibility: hidden
标签会挂载在html中，但是不会在页面上显示，会占用页面的空间
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><link rel="icon" href="/favicon.ico"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS隐藏元素的方法</title><style>.visibilityHidden {visibility: hidden;}</style>
</head><body><div>哈哈哈哈</div><div class="visibilityHidden">visibilityHidden</div><div>哈哈哈哈</div>
</body></html>
4. opacity: 0
把标签的透明度设置为0，也就是全透明，用户看不到，标签也就隐藏了。标签会挂载在html中，但是不会在页面上显示，会占用页面的空间
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><link rel="icon" href="/favicon.ico"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS隐藏元素的方法</title><style>.opacity100 {opacity: 1;}.opacity50 {opacity: 0.5;}.opacity20 {opacity: 0.2;}.opacity0 {opacity: 0;}</style>
</head><body><div>哈哈哈哈</div><div class="opacity100">opacity100</div><div class="opacity50">opacity50</div><div class="opacity20">opacity20</div><div class="opacity0">opacity0</div><div>哈哈哈哈</div>
</body></html>
5. position: absolute;与 left: -9999px
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><link rel="icon" href="/favicon.ico"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS隐藏元素的方法</title><style>.parent {position: relative;.absoluteLeft0 {position: absolute;left: 0px;top: 0px;}.absoluteLeft50 {position: absolute;left: -50px;top: 50px;}}</style>
</head><body><div class="parent"><div class="absoluteLeft0">absoluteLeft0</div><div class="absoluteLeft50">absoluteLeft50</div><div>哈哈哈哈</div></div>
</body></html>
6. z-index 和 position
z-index表示当前元素的层级。这么理解这个层级呢？比方说，你家房子，地上一层，地下一层地下室。地下室就是-1层。对应这里的z-index:-1;你站在地上，看不见地下室。
再说回到元素的层级的问题。你的html文档可见范围就是地上1层。你把元素放到地下室了，自然就看不到了。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><link rel="icon" href="/favicon.ico"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS隐藏元素的方法</title><style>.parent {position: relative;.zIndex {position: absolute;z-index: -1;}.absolute0 {position: absolute;z-index: 1;background-color: white;}}</style>
</head><body><div class="parent"><div class="zIndex">z-index为-1</div><div class="absolute0">哈哈哈哈</div></div>
</body></html>
7. clip-path: circle(0%)
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><link rel="icon" href="/favicon.ico"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS隐藏元素的方法</title><style>.div1 {width: 100px;height: 100px;background-color: aqua;}.div2 {width: 100px;height: 100px;background-color: red;}.div3 {width: 20px;height: 20px;margin: auto;background-color: black;}.div4 {width: 20px;height: 20px;margin: auto;background-color: black;clip-path: circle(50%);}.div5 {width: 20px;height: 20px;margin: auto;background-color: black;clip-path: circle(25%);}.div6 {width: 20px;height: 20px;margin: auto;background-color: black;clip-path: circle(0%);}</style>
</head><body><div class="div1"></div><div class="div2"><div class="div3"></div><div class="div4"></div><div class="div5"></div><div class="div6"></div><div>哈哈哈哈</div></div>
</body></html>
PS:整篇文章，精炼一下，如下
| 方式 | 是否占位 |
|---|---|
| display:none | 不占位 |
| visibility: hidden | 占位 |
| opacity: 0 | 占位 |
| position: absolute; left: -9999px | 占位(不在可视范围内) |
| z-index 和 position | 占位(会被其他元素遮挡) |
| clip-path: circle(0%) | 占位 |
为啥写的时候会写一句是否会挂载到dom树上，因为，我们使用vue中的v-if，v-show的时候，使用v-if时，元素压根就不会挂载到dom树上，v-show会挂载到dom树上(display:none)，可能刷新页面的时候会存在bug，需要重新渲染，需要使用v-if。这都是后话了。项目中用的时候就知道了。
相关文章：
CSS—隐藏元素：1分钟掌握与使用隐藏元素的方法
个人博客：haichenyi.com。感谢关注 1. 目录 1–目录2–display:none3–visibility: hidden4–opacity: 05–position: absolute;与 left: -9999px;6–z-index 和 position7–clip-path: circle(0%) 2. display:none 标签会挂载在html中，但是不会在页面上…...
二、双指针——5. 移动零
二、双指针——5. 移动零 题目描述示例示例1：示例2： 思路代码 题目描述 给定一个数组 nums，编写一个函数将所有 0 移动到数组的末尾，同时保持非零元素的相对顺序。 请注意 ，必须在不复制数组的情况下原地对数组进行操…...
论文笔记-NeurIPS2017-DropoutNet
论文笔记-NeurIPS2017-DropoutNet: Addressing Cold Start in Recommender Systems DropoutNet：解决推荐系统中的冷启动问题摘要1.引言2.前言3.方法3.1模型架构3.2冷启动训练3.3推荐 4.实验4.1实验设置4.2在CiteULike上的实验结果4.2.1 Dropout率的影响4.2.2 实验结…...
php 对接mqtt 完整版本，订阅消息，发送消息
首先打开链接如何在 PHP 项目中使用 MQTT 根据文章让所用依赖安装一下： composer require php-mqtt/client 安装之后弄一个部署 之后在工具里边可以相应链接上 接下来是代码： /**** 订阅消息* return void* throws \PhpMqtt\Client\Exceptions\Confi…...
谈谈 ES 6.8 到 7.10 的功能变迁（6）- 其他
这是 ES 7.10 相较于 ES 6.8 新增内容的最后一篇，主要涉及算分方法和同义词加载的部分。 自定义算分：script_score 2.0 Elasticsearch 7.0 引入了新一代的函数分数功能，称为 script_score 查询。这一新功能提供了一种更简单、更灵活的方式来…...
【苍穹外卖】问题笔记
【DAY1 】 1.VCS找不到 好吧，发现没安git 接着发现安全模式有问题，点开代码信任此项目 2.导入初始文件，全员爆红 好像没maven，配一个 并在设置里设置好maven 3.启用注解，见新手苍穹 pom.xml改lombok版本为1.1…...
脑机接口SSVEP 信号特征提取技术术语
目录 背景简介 1. 最小能量组合（MEC）和最大对比组合（MCC） 2. 典型相关分析（CCA） 3. 滤波器组CCA（FBCCA） 4. 二进制子带CCA（BsCCA） 5. 融合CCAÿ…...
【Veristand】Veristand 预编写教程目录
很久没有更新，最近打算出一期Veristand教程，暂时目录列成下面这个表格，如果各位有关心的遗漏的点，可以在评论区提问，我后期可以考虑添加进去，但是提前声明，太过小众的点我不会，欢迎各…...
C#光速入门的指南
以下是一份C#快速入门的指南，涵盖了基础语法、面向对象编程、输入输出、异常处理等方面，帮助你快速上手C#。 1. 开发环境搭建 要开始使用C#进行编程，你需要安装开发环境。最常用的是Visual Studio，它提供了丰富的工具和功能&…...
深入探索 STM32 微控制器：从基础到实践
一、引言 在当今的嵌入式系统领域，STM32 系列微控制器凭借其高性能、低功耗、丰富的外设以及广泛的应用场景，成为了众多开发者的首选。无论是在工业控制、智能家居、医疗设备，还是在消费电子等领域，STM32 都展现出了强大的生命力…...
Oracle性能调优（一）：时间模型统计
Oracle性能调优（一）：时间模型统计 时间模型统计视图时间模型统计指标时间模型统计视图 📖 DB Time的含义： DB Time表示前台会话在数据库调用中所花费的总时间，它是衡量数据库实例总负载的一个重要指标。DB Time是从实例启动时开始累计测量的，其计算方法是将所有前台会话…...
前端Npm面试题及参考答案
目录 npm 是什么？它的主要作用是什么？ npm 包管理工具与 Yarn 有何不同？ npm 的 package.json 文件有哪些重要字段？ 什么是 npm 依赖？如何在项目中安装、更新和移除依赖？ npm 的 node_modules 目录是什么？它的作用是什么？ 什么是 npm 脚本？如何在 package.json 中…...
记一次线上Tomcat服务内存溢出的问题处理
背景：JavaWeb项目部署在Tomcat服务器上，服务器用的Windows。 问题表现：系统出现偶发性无法访问（隔几天就会在早上无法访问） Tomcat的日志catalina中，有如下报错信息。 java.lang.OutOfMemoryError: GC ov…...
nist关于rsa中p,q的要求
NIST.FIPS.186-4 美国国家标准与技术研究院（National Institute of Standards and Technology，NIST） FIPS,美国联邦信息处理标准（Federal Information Processing Standard） Criteria for IFC Key Pairs B.3.1 Crite…...
Vue3项目如何使用TailWind CSS保姆级教程
一、简单介绍一下TailWind CSS TailWind CSS是一个实用工具优先的 CSS 框架，它通过提供大量的原子化 CSS 类，允许开发者通过组合这些类来快速构建界面，而无需编写额外的 CSS 文件。这种设计理念使得开发过程更加直观和高效ÿ…...
NO.22十六届蓝桥杯备战|一维数组|七道练习|冒泡排序(C++)
B2093 查找特定的值 - 洛谷 题⽬要求下标是从0开始的，和数组的下标是吻合的，存放数据应该从下标0开始n的取值范围是1~10000数组中存放的值的绝对值不超10000，说明int类型就⾜够了找到了输出下标，找不到要输出-1，这⼀点…...
Mysql的索引失效
MySQL 的索引失效指的是：尽管在表上建立了索引，但在某些查询场景下，MySQL 优化器却没有利用这些索引，从而导致查询走了全表扫描，性能大大降低。下面详细说明几种常见的导致索引失效的情况及其原因： 1. 对索…...
现代前端框架渲染机制深度解析：虚拟DOM到编译时优化
引言：前端框架的性能进化论 TikTok Web将React 18迁移至Vue 3后，点击响应延迟降低42%，内存占用减少35%。Shopify采用Svelte重构核心交互模块，首帧渲染速度提升580%。Discord在Next.js 14中启用React Server Components后…...
set 和 map 的左右护卫 【刷题反思】
1. 相近的营业额 1.1 题目 题目描述：我们定义，一天营业额的最小波动 min { | 该天以前某一天的营业额 - 该天营业额 | } 特别的，第一天的营业额最小波动为第一天的营业额 输入描述：第一行 n （n < 32767…...
【Linux高级IO】多路转接（poll epoll）
目录 1. poll 2. epoll 2.1 epoll_ctl 2.2 epoll_wait 2.3 epoll原理 2.4 epoll的工作模式 2.5 epoll的惊群效应 使用建议 总结 1. poll poll也是实现 I/O 多路复用的系统调用，可以解决select等待fd上限的问题，将输入输出参数分离，不需要…...
网络六边形受到攻击
大家读完觉得有帮助记得关注和点赞！！！ 抽象 现代智能交通系统 （ITS） 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 （…...
多云管理“拦路虎”：深入解析网络互联、身份同步与成本可视化的技术复杂度
一、引言：多云环境的技术复杂性本质 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时，基础设施的技术债呈现指数级积累。网络连接、身份认证、成本管理这三大核心挑战相互嵌套：跨云网络构建数据…...
调用支付宝接口响应40004 SYSTEM_ERROR问题排查
在对接支付宝API的时候，遇到了一些问题，记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...
css实现圆环展示百分比，根据值动态展示所占比例
代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...
无法与IP建立连接，未能下载VSCode服务器
如题，在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈，发现是VSCode版本自动更新惹的祸！！！ 在VSCode的帮助->关于这里发现前几天VSCode自动更新了，我的版本号变成了1.100.3 才导致了远程连接出…...
全球首个30米分辨率湿地数据集(2000—2022)
数据简介 今天我们分享的数据是全球30米分辨率湿地数据集，包含8种湿地亚类，该数据以0.5X0.5的瓦片存储，我们整理了所有属于中国的瓦片名称与其对应省份，方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...
Springcloud：Eureka 高可用集群搭建实战（服务注册与发现的底层原理与避坑指南）
引言：为什么 Eureka 依然是存量系统的核心？ 尽管 Nacos 等新注册中心崛起，但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制，是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...
C++中string流知识详解和示例
一、概览与类体系 C 提供三种基于内存字符串的流，定义在 <sstream> 中： std::istringstream：输入流，从已有字符串中读取并解析。std::ostringstream：输出流，向内部缓冲区写入内容，最终取…...
听写流程自动化实践，轻量级教育辅助
随着智能教育工具的发展，越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式，也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建，…...
MySQL 部分重点知识篇
一、数据库对象 1. 主键 定义 ：主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。 作用 ：确保数据的完整性，便于数据的查询和管理。 示例 ：在学生信息表中，学号可以作为主键ÿ…...