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

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

article 2026/3/29 10:06:09

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

编程日记 2026/3/26 8:50:01

EtherCAT总线学习笔记

一、EtherCAT的概述： EtherCAT是由德国BECKHOFF自动化公司于2003年提出的实时工业以太网技术。它具有高速和高数据有效率的特点，支持多种设备连接拓扑结构。其从站节点使用专用控制芯片，主站使用标准的以太网控制器。 EtherCAT的主要特点如…...

编程日记 2026/3/28 19:43:11

自学微信小程序的第八天

DAY8 1、使用动画API即可完成动画效果的制作，先通过wx.createAnimation()方法获取Animation实例，然后调用Animation实例的方法实现动画效果。表40：wx.createAnimation()方法的常用选项选项类型说明 duration number 动画持续时间，单位为毫秒，默认值为400毫秒 timing…...

编程日记 2026/3/25 23:17:22

WebRTC与PJSIP：呼叫中心系统技术选型指南

助力企业构建高效、灵活的通信解决方案在数字化时代，呼叫中心系统的技术选型直接影响客户服务效率和业务扩展能力。WebRTC与PJSIP作为两大主流通信技术，各有其核心优势与适用场景。本文从功能、成本、开发门槛等维度为您深度解析，助您精准匹…...

编程日记 2026/3/28 5:25:02

Vue-Flow绘制流程图(Vue3+ElementPlus+TS)简单案例

本文是vue3Elementplusts框架编写的简单可拖拽绘制案例。 1.效果图： 2.Index.vue主代码： <script lang"ts" setup> import { ref, markRaw } from "vue"; import {VueFlow,useVueFlow,MarkerType,type Node,type Edge } fro…...

编程日记 2026/3/28 8:34:29

PDF文件转换为PNG图像

要实现将PDF文件转换为PNG图像，可以使用Python的pdf2image库。pdf2image是一个基于poppler和Pillow（PIL）的库，可以将PDF页面转换为图像。首先，需要安装必要的库： pip install pdf2image在安装pdf2image时…...

编程日记 2026/3/2 8:43:23

c++中的静态多态和动态多态简介

在 C 中，多态性（Polymorphism） 分为静态多态（Static Polymorphism） 和动态多态（Dynamic Polymorphism），二者通过不同的机制实现代码的灵活性。以下是详细对比和核心要点&#xff1…...

编程日记 2025/12/27 1:59:15

如何通过 LlamaIndex 将数据导入 Elasticsearch

作者：来自 Elastic Andre Luiz 逐步介绍如何使用 RAG 和 LlamaIndex 提取数据并进行搜索。在本文中，我们将使用 LlamaIndex 来索引数据，从而实现一个常见问题搜索引擎。 Elasticsearch 将作为我们的向量数据库，实现向量搜索&am…...

编程日记 2026/3/29 10:01:47

Boosting

Boosting 学习目标知道boosting集成原理和实现过程知道bagging和boosting集成的区别知道AdaBoost集成原理 Boosting思想 Boosting思想图每一个训练器重点关注前一个训练器不足的地方进行训练通过加权投票的方式，得出预测结果串行的训练方式 1 什么是boosting 随着…...

编程日记 2026/3/16 15:32:12

【通俗讲解电子电路】——从零开始理解生活中的电路(一)

导言：电子电路为什么重要？ ——看不见的“魔法”，如何驱动你的生活？ 清晨，当你的手机闹钟响起时，你可能不会想到，是电子电路在精准控制着时间的跳动；当你用微波炉加热早餐时&#…...

编程日记 2026/3/15 4:57:33

LeetCode72编辑距离（动态规划）

给你两个单词 word1 和 word2， 请返回将 word1 转换成 word2 所使用的最少操作数。你可以对一个单词进行如下三种操作： 插入一个字符删除一个字符替换一个字符示例 1： 输入：word1 “horse”, word2 “ros” 输出&#xf…...

编程日记 2026/3/13 20:33:10

rabbitmq单向ssl认证配置与最佳实践（适用于各大云厂商）

背景这里后补直接上代码最佳实践主要从两个方面保证消息不丢失 RabbitMQ方面创建队列时开启持久化创建交换器时开启持久化创建镜像队列（可选）开启延迟队列（可选） 代码层面开启生产者到交换器回调参数开启交换器到队列…...

编程日记 2025/8/11 18:30:27

【K8S】Kubernetes 基本架构、节点类型及运行流程详解（附架构图及流程图）

Kubernetes 架构 k8s 集群多个 master node 多个 work nodeMaster 节点（主节点）：负责集群的管理任务，包括调度容器、维护集群状态、监控集群、管理服务发现等。Worker 节点（工作节点）：实际运…...

编程日记 2026/2/25 12:34:11

Windows版FFmpeg使用及B站视频下载示例python源码

Windows版FFmpeg使用及B站视频下载示例python源码 FFmpeg介绍和下载 FFmpeg 是一个功能强大、灵活且广泛使用的多媒体处理工具，无论是在专业领域还是日常使用中，都能满足各种多媒体处理需求。FFmpeg 是一个开源项目，遵循 LGPL 或 GPL 许可。…...

编程日记 2026/3/20 5:10:00

飞书考勤Excel导入到自己系统

此篇主要用于记录Excel一行中，单条数据的日期拿取，并判断上下班打卡情况。代码可能满足不了大部分需求，目前只够本公司用，如果需要，可以参考。需要把飞书月度汇总的考勤表导入系统中可以参考下。下图为需要获取的年…...

编程日记 2026/3/26 8:49:56

【leetcode hot 100 560】和为K的子数组

解法一：用左右指针寻找字串，如果和>k，则减少一个数（left）；如果和<k，则加上一个数（right）。 class Solution {public int subarraySum(int[] nums, int k) {int nu…...

编程日记 2026/3/26 8:49:57

EGO-Planner的无人机视觉选择（yolov5和yolov8）

EGO-Planner的无人机视觉选择（yolov5和yolov8） 效果 yolov5检测效果 yolov8检测效果一、YOLOv8 vs YOLOv5：关键差异解析 1. 训练效率：为何YOLOv8更快？ 架构轻量化 YOLOv8采用C2f模块（Cross Stage Partia…...

编程日记 2026/3/16 4:30:27

C++ | 面向对象 | 类

👻类 👾语法格式 class className{Access specifiers: // 访问权限DataType variable; // 变量returnType functions() { } // 方法 };👾访问权限 class className {public:// 公有成员protected:// 受保护成员private:// 私有成员 }…...

编程日记 2026/3/9 6:22:45

性能测试分析和调优

步骤性能调优的步骤性能调优的步骤： 1.确定问题：根据性能测试的结果来分析确定bug。–测试人员职责 2.分析原因：分析问题产生的原因。----开发人员职责 3.给出解决方案：可以是修改软件配置、增加硬件资源配置、修改代码等----…...

编程日记 2026/3/18 0:54:23

阿里云oss文件上传springboot若依java

一、第一步引入依赖  <dependency><groupId>com.aliyun.oss</groupId><artifactId>aliyun-sdk-oss</artifactId> </dependency> 二、第二步 application.yml #阿里云oss服务配置 aliyun:oss:endpoint: …...

编程日记 2026/3/18 20:00:29

【自学笔记】Oracle基础知识点总览-持续更新

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录 Oracle 数据库基础知识点总览1. 数据库安装与配置2. SQL基础3. PL/SQL基础4. 数据库管理5. 高级主题总结 Oracle 数据库基础知识点总览 1. 数据库安装与配置安装…...

编程日记 2026/2/12 2:11:29

使用create_sql_query_chain工具根据自然语言问题生成SQL查询，踩坑版

1. 开启调试模式 from langchain import debugdebug True # 启用调试模式说明： 这里从 langchain 库中导入了一个名为 debug 的变量（或模块），然后将它设置为 True。这通常用来启用调试模式，方便开发者在程序运行时看…...

编程日记 2026/3/17 6:29:33

PyInstaller 打包python 程序成可执行文件

pyinstaller --onefile --name my_project --add-data "config/config.json:config" main.py 要将整个 Python 项目打包成一个可执行文件，可以使用 PyInstaller 来完成这个任务。以下是如何将整个项目打包成可执行文件的步骤： 1. 安装 PyIns…...

编程日记 2025/8/12 11:12:17

生鲜行业智能化供应链解决方案技术白皮书

行业痛点与技术挑战损耗控制难题行业平均损耗率达18%-25%，需构建动态定价模型与智能分拣系统冷链管理复杂度全程温控数据采集点超过23个/车次，异常响应延迟需压缩至90秒内供需预测偏差传统模式预测准确率不足65%，亟需AI驱动需求预测体…...

编程日记 2025/12/31 2:24:24

preg_replace 与 str_replace 的比较与选择

preg_replace 与 str_replace 的比较与选择 ——PHP字符串处理的核心工具深度解析一、核心功能定位在PHP的字符串处理中，str_replace和preg_replace是两种最常用的替换函数，但其设计目标和应用场景存在本质差异： str_replace 简单字符串替…...

编程日记 2025/8/11 11:17:56

无人机自主导航与避障技术！

自主导航的实现环境感知：通过传感器（如摄像头、激光雷达、超声波传感器等）获取周围环境信息。地图构建：利用SLAM（同步定位与地图构建）技术，实时生成环境地图并确定无人机的位置。路径规划…...

编程日记 2026/3/8 0:57:20

密码学（哈希函数）

4.1 Hash函数与数据完整性数据完整性： 检测传输消息（加密或未加密）的修改。密码学Hash函数： 构建某些数据的简短“指纹”；如果数据被篡改，则该指纹（以高概率）不再有效。Hash函数…...

编程日记 2026/3/29 7:42:38

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

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

编程日记 2025/8/12 21:20:15

React 常见面试题及答案

记录面试过程常见问题，如有错误，欢迎批评指正 1. 什么是虚拟DOM？为什么它提高了性能？ 虚拟DOM是React创建的一个轻量级JavaScript对象，表示真实DOM的结构。当状态变化时，React会生成新的虚拟DOM&#xf…...

编程日记 2025/8/11 22:21:28

SpringSecurity 实现token 认证

配置类 Configuration EnableWebSecurity EnableGlobalMethodSecurity(prePostEnabledtrue) public class SpringSecurityConfig extends WebSecurityConfigurerAdapter { Bean Override public AuthenticationManager authenticationManagerBean() throws Exception {return s…...

编程日记 2025/3/23 2:43:38