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

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

news 2026/4/5 16:08:57

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

个人博客：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中，但是不会在页面上…...

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

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

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

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

论文笔记-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 实验结…...

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

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

首先打开链接如何在 PHP 项目中使用 MQTT 根据文章让所用依赖安装一下： composer require php-mqtt/client 安装之后弄一个部署之后在工具里边可以相应链接上接下来是代码： /**** 订阅消息* 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 新增内容的最后一篇，主要涉及算分方法和同义词加载的部分。自定义算分：script_score 2.0 Elasticsearch 7.0 引入了新一代的函数分数功能，称为 script_score 查询。这一新功能提供了一种更简单、更灵活的方式来…...

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

【苍穹外卖】问题笔记

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

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

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

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

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

【Veristand】Veristand 预编写教程目录

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

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

C#光速入门的指南

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

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

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

一、引言在当今的嵌入式系统领域，STM32 系列微控制器凭借其高性能、低功耗、丰富的外设以及广泛的应用场景，成为了众多开发者的首选。无论是在工业控制、智能家居、医疗设备，还是在消费电子等领域，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服务内存溢出的问题处理

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

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

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…...

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

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

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

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

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

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

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

Mysql的索引失效

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

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

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

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

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

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

1. 相近的营业额 1.1 题目题目描述：我们定义，一天营业额的最小波动 min { | 该天以前某一天的营业额 - 该天营业额 | } 特别的，第一天的营业额最小波动为第一天的营业额输入描述：第一行 n （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 多路复用的系统调用，可以解决select等待fd上限的问题，将输入输出参数分离，不需要…...

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

智能排障：让快马AI成为你解决openclaw部署难题的专家顾问

最近在部署openclaw项目时遇到了不少头疼的问题，从依赖冲突到环境配置，每一步都可能踩坑。作为一个经常和开源项目打交道的人，我发现传统排障方式效率太低，于是尝试用AI来辅助解决这些问题。下面分享我的实践过程，希望…...

编程新知 2026/4/5 15:54:25

短视频 SEO 与文章 SEO 有什么不同_如何制作高质量的短视频提升 SEO

短视频 SEO 与文章 SEO 有什么不同_如何制作高质量的短视频提升 SEO 在数字化时代，短视频和文章作为两种主要的内容形式，各有其独特的魅力和推广方式。而在搜索引擎优化（SEO）中，它们的策略也有许多不同之处。本文将详…...

编程新知 2026/4/5 15:42:13

GREAT-PVT周跳探测算法：从MW组合到电离层延迟处理的代码逻辑剖析

1. GREAT-PVT周跳探测算法概述周跳探测是卫星导航定位中的关键技术难题。简单来说，当卫星信号被遮挡或干扰时，接收机可能会丢失对载波相位的连续跟踪，导致相位观测值出现整数倍的跳变，这种现象就称为周跳。打个比方，就…...

编程新知 2026/4/5 15:22:03

CTF比赛必备：3步掌握无SQL版XSS数据接收平台实战技巧

CTF比赛必备：3步掌握无SQL版XSS数据接收平台实战技巧【免费下载链接】BlueLotus_XSSReceiver 项目地址: https://gitcode.com/gh_mirrors/bl/BlueLotus_XSSReceiver 在网络安全测试和CTF比赛中，XSS漏洞的利用和数据捕获是每个参赛者必须掌握的核…...

编程新知 2026/4/5 14:47:15

YimMenu终极指南：GTA5增强工具完整使用教程

YimMenu终极指南：GTA5增强工具完整使用教程【免费下载链接】YimMenu YimMenu, a GTA V menu protecting against a wide ranges of the public crashes and improving the overall experience. 项目地址: https://gitcode.com/GitHub_Trending/yi/YimMenu Y…...

编程新知 2026/4/5 14:37:06

新手友好：基于快马平台从零学习调用阿里悟空AI绘画接口

新手友好：基于快马平台从零学习调用阿里悟空AI绘画接口作为一个刚接触AI绘画API的新手，我最近尝试了在InsCode(快马)平台上学习调用阿里悟空官网的绘画接口。整个过程比我预想的要简单很多，特别适合像我这样的初学者。下面分享一下我的学习…...

编程新知 2026/4/5 13:26:00

Wan2.2-I2V-A14B开源大模型：支持ONNX Runtime跨平台视频生成

Wan2.2-I2V-A14B开源大模型：支持ONNX Runtime跨平台视频生成 1. 模型概述与核心能力 Wan2.2-I2V-A14B是一款开源的文生视频大模型，基于ONNX Runtime实现跨平台部署能力。该模型能够将文本描述直接转化为高质量视频内容，支持多种分辨率和时长…...

编程新知 2026/4/5 13:17:53

如何用Pulover‘s Macro Creator实现电脑自动化？免费脚本录制工具完全指南

如何用Pulovers Macro Creator实现电脑自动化？免费脚本录制工具完全指南【免费下载链接】PuloversMacroCreator Automation Utility - Recorder & Script Generator 项目地址: https://gitcode.com/gh_mirrors/pu/PuloversMacroCreator 厌倦了每天重复的…...

编程新知 2026/4/5 13:09:36

TradingAgents-CN终极指南：3步构建你的AI量化交易分析系统

TradingAgents-CN终极指南：3步构建你的AI量化交易分析系统【免费下载链接】TradingAgents-CN 基于多智能体LLM的中文金融交易框架 - TradingAgents中文增强版项目地址: https://gitcode.com/GitHub_Trending/tr/TradingAgents-CN TradingAgents-CN是一个基…...

编程新知 2026/4/5 12:34:40

解密智能工具箱：如何用Snap Hutao高效管理你的原神游戏数据

解密智能工具箱：如何用Snap Hutao高效管理你的原神游戏数据【免费下载链接】Snap.Hutao 实用的开源多功能原神工具箱 🧰 / Multifunctional Open-Source Genshin Impact Toolkit 🧰 项目地址: https://gitcode.com/GitHub_Trending/sn/Sna…...

编程新知 2026/4/5 12:20:33