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

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

news 2025/8/8 3:23:08

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

基于算法竞赛的c++编程（28）结构体的进阶应用

结构体的嵌套与复杂数据组织 在C中&#xff0c;结构体可以嵌套使用&#xff0c;形成更复杂的数据结构。例如&#xff0c;可以通过嵌套结构体描述多层级数据关系&#xff1a; struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

编程新知 2025/6/17 5:30:27

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

编程新知 2025/8/6 5:28:24

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

编程新知 2025/8/6 23:42:29

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

编程新知 2025/6/27 0:59:29

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

编程新知 2025/8/3 0:03:46

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

编程新知 2025/8/6 6:12:14

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

编程新知 2025/7/9 21:22:02

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

编程新知 2025/7/27 1:33:21

九天毕昇深度学习平台 | 如何安装库？

pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子&#xff1a; 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...

编程新知 2025/8/6 18:54:02

Linux nano命令的基本使用

参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时&#xff0c;显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...

编程新知 2025/8/4 19:56:25