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上限的问题，将输入输出参数分离，不需要…...
如何在看板中体现优先级变化
在看板中有效体现优先级变化的关键措施包括：采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中，设置任务排序规则尤其重要，因为它让看板视觉上直观地体…...
MVC 数据库
MVC 数据库 引言 在软件开发领域，Model-View-Controller（MVC）是一种流行的软件架构模式，它将应用程序分为三个核心组件：模型（Model）、视图（View）和控制器（Controller）。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系，以…...
【2025年】解决Burpsuite抓不到https包的问题
环境：windows11 burpsuite:2025.5 在抓取https网站时，burpsuite抓取不到https数据包，只显示： 解决该问题只需如下三个步骤： 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...
Matlab | matlab常用命令总结
常用命令 一、 基础操作与环境二、 矩阵与数组操作（核心）三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结，涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...
鱼香ros docker配置镜像报错：https://registry-1.docker.io/v2/
使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题：docker pull 失败 网络不同，需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...
NFT模式：数字资产确权与链游经济系统构建
NFT模式：数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新：构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议：基于LayerZero协议实现以太坊、Solana等公链资产互通，通过零知…...
什么是Ansible Jinja2
理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具，可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板，允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板，并通…...
：观察者模式)
JS设计模式(4)：观察者模式
JS设计模式(4):观察者模式 一、引入 在开发中，我们经常会遇到这样的场景：一个对象的状态变化需要自动通知其他对象，比如： 电商平台中，商品库存变化时需要通知所有订阅该商品的用户；新闻网站中࿰…...
【LeetCode】3309. 连接二进制表示可形成的最大数值（递归|回溯|位运算）
LeetCode 3309. 连接二进制表示可形成的最大数值（中等） 题目描述解题思路Java代码 题目描述 题目链接：LeetCode 3309. 连接二进制表示可形成的最大数值（中等） 给你一个长度为 3 的整数数组 nums。 现以某种顺序 连接…...
WebRTC从入门到实践 - 零基础教程
WebRTC从入门到实践 - 零基础教程 目录 WebRTC简介 基础概念 工作原理 开发环境搭建 基础实践 三个实战案例 常见问题解答 1. WebRTC简介 1.1 什么是WebRTC？ WebRTC（Web Real-Time Communication）是一个支持网页浏览器进行实时语音…...