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

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

news 2025/9/25 22:13:02

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

Python爬虫实战：研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库，专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力，提供了直观的 API，让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

编程新知 2025/8/5 5:52:21

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

编程新知 2025/9/21 0:49:02

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

编程新知 2025/8/4 2:45:15

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

编程新知 2025/9/23 2:37:50

什么是EULA和DPA

文章目录 EULA&#xff08;End User License Agreement&#xff09;DPA&#xff08;Data Protection Agreement&#xff09;一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA&#xff08;End User License Agreement&#xff09; 定义&#xff1a; EULA即…...

编程新知 2025/9/20 20:06:52

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试&#xff0c;通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小&#xff0c;增大可提高计算复杂度duration: 测试持续时间&#xff08;秒&…...

编程新知 2025/7/20 15:22:30

NFT模式：数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

编程新知 2025/8/27 2:19:34

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI&#xff0c;使用客户端或是内部自己搭建集成大模型的终端&#xff0c;加速与大型语言模型&#xff08;LLM&#xff09;的结合&#xff0c;同时使用检索增强生成&#xff08;Retrieval Augmented Generation &#…...

编程新知 2025/9/22 17:44:17

QT3D学习笔记——圆台、圆锥

类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体&#xff08;对象或容器&#xff09;QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质&#xff08;定义颜色、反光等&#xff09;QFirstPersonC…...

编程新知 2025/9/22 1:53:57

UE5 音效系统

一.音效管理 音乐一般都是WAV,创建一个背景音乐类SoudClass,一个音效类SoundClass。所有的音乐都分为这两个类。再创建一个总音乐类&#xff0c;将上述两个作为它的子类。 接着我们创建一个音乐混合类SoundMix&#xff0c;将上述三个类翻入其中&#xff0c;通过它管理每个音乐…...

编程新知 2025/9/21 10:38:15