当前位置： 首页 > news >正文

CSS—隐藏元素：1分钟掌握与使用隐藏元素的方法

news 2026/5/23 20:20:49

个人博客：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>

displayNone的效果图
下面是没有display:none的效果图
没有displayNone的效果图

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>

visibilityHidden的效果图

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>

opacity0的效果图

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>

left效果图

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>

z-index的效果图

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分钟掌握与使用隐藏元素的方法

个人博客&#xff1a;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中&#xff0c;但是不会在页面上…...

编程日记 2025/3/2 20:02:37

二、双指针——5. 移动零

二、双指针——5. 移动零 题目描述示例示例1&#xff1a;示例2&#xff1a; 思路代码 题目描述 给定一个数组 nums&#xff0c;编写一个函数将所有 0 移动到数组的末尾&#xff0c;同时保持非零元素的相对顺序。 请注意 &#xff0c;必须在不复制数组的情况下原地对数组进行操…...

编程日记 2025/3/2 20:00:35

论文笔记-NeurIPS2017-DropoutNet

论文笔记-NeurIPS2017-DropoutNet: Addressing Cold Start in Recommender Systems DropoutNet&#xff1a;解决推荐系统中的冷启动问题摘要1.引言2.前言3.方法3.1模型架构3.2冷启动训练3.3推荐 4.实验4.1实验设置4.2在CiteULike上的实验结果4.2.1 Dropout率的影响4.2.2 实验结…...

编程日记 2025/3/2 19:56:30

php 对接mqtt 完整版本，订阅消息，发送消息

首先打开链接如何在 PHP 项目中使用 MQTT 根据文章让所用依赖安装一下&#xff1a; composer require php-mqtt/client 安装之后弄一个部署 之后在工具里边可以相应链接上 接下来是代码&#xff1a; /**** 订阅消息* return void* throws \PhpMqtt\Client\Exceptions\Confi…...

编程日记 2025/3/2 19:47:20

谈谈 ES 6.8 到 7.10 的功能变迁（6）- 其他

这是 ES 7.10 相较于 ES 6.8 新增内容的最后一篇&#xff0c;主要涉及算分方法和同义词加载的部分。 自定义算分&#xff1a;script_score 2.0 Elasticsearch 7.0 引入了新一代的函数分数功能&#xff0c;称为 script_score 查询。这一新功能提供了一种更简单、更灵活的方式来…...

编程日记 2025/3/2 19:46:18

【苍穹外卖】问题笔记

【DAY1 】 1.VCS找不到 好吧&#xff0c;发现没安git 接着发现安全模式有问题&#xff0c;点开代码信任此项目 2.导入初始文件&#xff0c;全员爆红 好像没maven&#xff0c;配一个 并在设置里设置好maven 3.启用注解&#xff0c;见新手苍穹 pom.xml改lombok版本为1.1…...

编程日记 2025/3/2 19:45:17

脑机接口SSVEP 信号特征提取技术术语

目录 背景简介 1. 最小能量组合&#xff08;MEC&#xff09;和最大对比组合&#xff08;MCC&#xff09; 2. 典型相关分析&#xff08;CCA&#xff09; 3. 滤波器组CCA&#xff08;FBCCA&#xff09; 4. 二进制子带CCA&#xff08;BsCCA&#xff09; 5. 融合CCA&#xff…...

编程日记 2025/3/2 19:43:13

【Veristand】Veristand 预编写教程目录

很久没有更新&#xff0c;最近打算出一期Veristand教程&#xff0c;暂时目录列成下面这个表格&#xff0c;如果各位有关心的遗漏的点&#xff0c;可以在评论区提问&#xff0c;我后期可以考虑添加进去&#xff0c;但是提前声明&#xff0c;太过小众的点我不会&#xff0c;欢迎各…...

编程日记 2025/3/2 19:42:11

C#光速入门的指南

以下是一份C#快速入门的指南&#xff0c;涵盖了基础语法、面向对象编程、输入输出、异常处理等方面&#xff0c;帮助你快速上手C#。 1. 开发环境搭建 要开始使用C#进行编程&#xff0c;你需要安装开发环境。最常用的是Visual Studio&#xff0c;它提供了丰富的工具和功能&…...

编程日记 2025/3/2 19:38:06

深入探索 STM32 微控制器：从基础到实践

一、引言 在当今的嵌入式系统领域&#xff0c;STM32 系列微控制器凭借其高性能、低功耗、丰富的外设以及广泛的应用场景&#xff0c;成为了众多开发者的首选。无论是在工业控制、智能家居、医疗设备&#xff0c;还是在消费电子等领域&#xff0c;STM32 都展现出了强大的生命力…...

编程日记 2025/3/2 19:37:05

Oracle性能调优（一）：时间模型统计

Oracle性能调优（一）：时间模型统计 时间模型统计视图时间模型统计指标时间模型统计视图 📖 DB Time的含义： DB Time表示前台会话在数据库调用中所花费的总时间，它是衡量数据库实例总负载的一个重要指标。DB Time是从实例启动时开始累计测量的，其计算方法是将所有前台会话…...

编程日记 2025/3/2 19:35:03

前端Npm面试题及参考答案

目录 npm 是什么？它的主要作用是什么？ npm 包管理工具与 Yarn 有何不同？ npm 的 package.json 文件有哪些重要字段？ 什么是 npm 依赖？如何在项目中安装、更新和移除依赖？ npm 的 node_modules 目录是什么？它的作用是什么？ 什么是 npm 脚本？如何在 package.json 中…...

编程日记 2025/3/2 19:32:00

记一次线上Tomcat服务内存溢出的问题处理

背景&#xff1a;JavaWeb项目部署在Tomcat服务器上&#xff0c;服务器用的Windows。 问题表现&#xff1a;系统出现偶发性无法访问&#xff08;隔几天就会在早上无法访问&#xff09; Tomcat的日志catalina中&#xff0c;有如下报错信息。 java.lang.OutOfMemoryError: GC ov…...

编程日记 2025/3/2 19:24:52

nist关于rsa中p,q的要求

NIST.FIPS.186-4 美国国家标准与技术研究院&#xff08;National Institute of Standards and Technology&#xff0c;NIST&#xff09; FIPS,美国联邦信息处理标准&#xff08;Federal Information Processing Standard&#xff09; Criteria for IFC Key Pairs B.3.1 Crite…...

编程日记 2025/3/2 19:22:49

Vue3项目如何使用TailWind CSS保姆级教程

‌一、简单介绍一下TailWind CSS TailWind CSS是一个实用工具优先的 CSS 框架&#xff0c;它通过提供大量的原子化 CSS 类&#xff0c;允许开发者通过组合这些类来快速构建界面&#xff0c;而无需编写额外的 CSS 文件。这种设计理念使得开发过程更加直观和高效&#xff…...

编程日记 2025/3/2 19:18:44

NO.22十六届蓝桥杯备战|一维数组|七道练习|冒泡排序(C++)

B2093 查找特定的值 - 洛谷 题⽬要求下标是从0开始的&#xff0c;和数组的下标是吻合的&#xff0c;存放数据应该从下标0开始n的取值范围是1~10000数组中存放的值的绝对值不超10000&#xff0c;说明int类型就⾜够了找到了输出下标&#xff0c;找不到要输出-1&#xff0c;这⼀点…...

编程日记 2025/3/2 19:14:39

Mysql的索引失效

MySQL 的索引失效指的是&#xff1a;尽管在表上建立了索引&#xff0c;但在某些查询场景下&#xff0c;MySQL 优化器却没有利用这些索引&#xff0c;从而导致查询走了全表扫描&#xff0c;性能大大降低。下面详细说明几种常见的导致索引失效的情况及其原因&#xff1a; 1. 对索…...

编程日记 2025/3/2 19:13:38

现代前端框架渲染机制深度解析：虚拟DOM到编译时优化

引言&#xff1a;前端框架的性能进化论 TikTok Web将React 18迁移至Vue 3后&#xff0c;点击响应延迟降低42%&#xff0c;内存占用减少35%。Shopify采用Svelte重构核心交互模块&#xff0c;首帧渲染速度提升580%。Discord在Next.js 14中启用React Server Components后&#xf…...

编程日记 2025/3/2 19:12:37

set 和 map 的左右护卫 【刷题反思】

1. 相近的营业额 1.1 题目 题目描述&#xff1a;我们定义&#xff0c;一天营业额的最小波动 min { | 该天以前某一天的营业额 - 该天营业额 | } 特别的&#xff0c;第一天的营业额最小波动为第一天的营业额 输入描述&#xff1a;第一行 n &#xff08;n < 32767&#xf…...

编程日记 2025/3/2 19:09:34

【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 多路复用的系统调用&#xff0c;可以解决select等待fd上限的问题&#xff0c;将输入输出参数分离&#xff0c;不需要…...

编程日记 2025/3/2 19:05:30

选型必读丨高温定向传感器采购与使用的真实成本分析

在定向钻井设备采购决策中&#xff0c;价格往往不是唯一的考量因素。很多用户关注的是高温定向传感器的全生命周期总成本&#xff08;TCO, Total Cost of Ownership&#xff09;以及最终能带来怎样的投资回报&#xff08;ROI&#xff09;。本文将从专业角度&#xff0c;系统分析…...

编程新知 2026/5/23 18:32:18

STM32CubeMX保姆级教程：从零配置STM32F103C8T6工程，5分钟点亮你的第一个LED

STM32CubeMX极简入门指南&#xff1a;5分钟实现LED控制全流程 第一次接触嵌入式开发时&#xff0c;那种既兴奋又忐忑的心情我至今记忆犹新。看着眼前这块小小的蓝色开发板&#xff0c;既想立刻让它"活"起来&#xff0c;又担心复杂的配置过程会让人望而却步。幸运的是…...

编程新知 2026/5/23 18:27:15

Unity特效优化指南：从ParticleSystem参数调优到性能瓶颈排查

Unity特效优化实战&#xff1a;ParticleSystem深度调优与移动端性能突围 记得第一次在低端安卓机上测试火焰特效时&#xff0c;帧率直接从60掉到22的绝望吗&#xff1f;我们团队为此通宵三晚重构了整个粒子系统。本文将分享从血泪教训中总结的ParticleSystem优化方法论&#xf…...

编程新知 2026/5/23 15:17:56

宽频精准・性能标杆｜OM-T 台式频谱分析仪，支撑交通通信高质量运维

铁路、高速公路专网通信&#xff0c;对频谱纯净度、信号稳定性、设备校准精度要求极高。随着 5G、LTE、车路协同等系统大规模应用&#xff0c;频段叠加、信号交织、干扰频发&#xff0c;传统仪器难以兼顾宽频覆盖、高分辨率与长期稳定性。OM-T 系列台式频谱分析仪&#xff0c;凭…...

编程新知 2026/5/23 15:05:25

胶片颗粒≠噪点！20年胶片扫描工程师首曝Midjourney底层噪声映射逻辑（RGB通道衰减比=1.03:0.97:1.12）

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;胶片颗粒≠噪点&#xff01;20年胶片扫描工程师首曝Midjourney底层噪声映射逻辑&#xff08;RGB通道衰减比1.03:0.97:1.12&#xff09; 胶片颗粒是银盐晶体在显影过程中形成的物理性随机簇状结构&#xff0c;…...

编程新知 2026/5/23 13:39:37

KMS智能激活工具：3分钟彻底解决Windows和Office激活难题

KMS智能激活工具&#xff1a;3分钟彻底解决Windows和Office激活难题 【免费下载链接】KMS_VL_ALL_AIO Smart Activation Script 项目地址: https://gitcode.com/gh_mirrors/km/KMS_VL_ALL_AIO 还在为Windows系统频繁弹出激活提示而烦恼吗&#xff1f;Office文档突然变成…...

编程新知 2026/5/23 13:33:10

FastMamba：边缘计算中的Mamba2高效部署方案

1. FastMamba项目概述在深度学习领域&#xff0c;状态空间模型&#xff08;State Space Models, SSMs&#xff09;正逐渐成为处理长序列任务的新范式。Mamba2作为SSM家族的最新成员&#xff0c;通过状态空间对偶性框架和半可分离矩阵分解技术&#xff0c;在保持模型精度的同时&…...

编程新知 2026/5/23 13:14:18

在多模型间切换使用时对响应速度与一致性的感受

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 在多模型间切换使用时对响应速度与一致性的感受 作为一名需要频繁调用大模型API的开发者&#xff0c;我的日常工作离不开与各类模型…...

编程新知 2026/5/23 12:17:46

5个高级技巧：掌握Dark Reader动态主题修复的最佳实践

5个高级技巧&#xff1a;掌握Dark Reader动态主题修复的最佳实践 【免费下载链接】darkreader Dark Reader Chrome and Firefox extension 项目地址: https://gitcode.com/gh_mirrors/da/darkreader Dark Reader是一款广受欢迎的浏览器扩展&#xff0c;它通过智能算法将…...

编程新知 2026/5/23 11:22:50

免费商用音乐下载网站TOP5 | 基于版权合规与素材复用效率的横评

引言 2026年&#xff0c;国内内容营销市场持续扩张&#xff0c;企业短视频、直播切片、线下活动音视频等场景对背景音乐的需求量同比增长37%&#xff08;根据《2026中国数字内容版权白皮书》&#xff09;。然而&#xff0c;创作者在实际选曲过程中普遍存在三类矛盾&#xff1a…...

编程新知 2026/5/23 9:26:40