CSS隐藏元素的方法 ( 5 种)
还是大剑师兰特:曾是美国某知名大学计算机专业研究生,现为航空航海领域高级前端工程师;CSDN知名博主,GIS领域优质创作者,深耕openlayers、leaflet、mapbox、cesium,canvas,webgl,echarts等技术开发,欢迎加底部微信(gis-dajianshi),一起交流。

| No. | 推荐链接 |
|---|---|
| 1 | Openlayers 【入门教程】 - 【源代码+图文 300+】 |
| 2 | Leaflet 【入门教程】 - 【源代码+图文示例 150+】 |
| 3 | Cesium 【入门教程】 - 【源代码+图文示例200+】 |
| 4 | MapboxGL【入门教程】 - 【源代码+图文示例150+】 |
| 5 | 前端就业宝典 【面试题+详细答案 1000+】 |

文章目录
- 1. `display: none`
- 2. `visibility: hidden`
- 3. `opacity: 0`
- 4. `height: 0` 和 `width: 0` 或 `overflow: hidden`
- 5. `position: absolute` 并移出可视区

在CSS中隐藏元素有多种方法,下面列出几种常见方法及其适用场景与区别:
1. display: none
.element-to-hide {display: none;
}
适用场景:完全隐藏元素,同时去除元素所占空间,不影响周围布局。
区别:元素从文档流中移除,无法参与布局,不响应鼠标事件,对SEO也不友好(搜索引擎通常无法抓取这类隐藏内容)。
2. visibility: hidden
.element-to-hide {visibility: hidden;
}
适用场景:隐藏元素内容,但保留元素原本所占的空间。
区别:元素依旧占据页面布局,只是内容不可见,对SEO的影响相对较小,因为内容虽然看不见,但搜索引擎还是能读取。
3. opacity: 0
.element-to-hide {opacity: 0;
}
适用场景:使元素透明度为0,达到视觉隐藏的效果,同时保持元素可操作性。
区别:元素依然可见(只是透明),占用空间并响应鼠标事件。对于辅助设备(如屏幕阅读器)而言,该元素仍然是可见的。
4. height: 0 和 width: 0 或 overflow: hidden
.element-to-hide {height: 0;width: 0;overflow: hidden;
}
适用场景:收缩元素至无可见内容,同时防止内容溢出影响布局。
区别:元素占据的空间被压缩,但内容可能因未正确清除而残留,对SEO无负面影响,但不如display: none彻底。
5. position: absolute 并移出可视区
.element-to-hide {position: absolute;top: -9999px;left: -9999px;
}
适用场景:将元素移出可视窗口,确保在任何分辨率下都无法看到。
区别:元素仍然存在于DOM中并保持原有的尺寸,只是位置发生了改变,可能会对SEO产生一定影响,因为内容远离了主要内容区域。
在选择隐藏元素的方法时,应考虑元素是否需要参与布局、是否需要响应事件、是否要考虑SEO和无障碍访问等因素。对于大部分情况,display: none 是最常用的隐藏元素方式。
相关文章:
CSS隐藏元素的方法 ( 5 种)
还是大剑师兰特:曾是美国某知名大学计算机专业研究生,现为航空航海领域高级前端工程师;CSDN知名博主,GIS领域优质创作者,深耕openlayers、leaflet、mapbox、cesium,canvas,webgl,ech…...
微信小程序(五十九)使用鉴权组件时原页面js自动加载解决方法(24/3/14)
注释很详细,直接上代码 上一篇 新增内容: 1.使用覆盖函数的方法阻止原页面的自动执行方法 2.使用判断实现只有当未登录时才进行方法覆盖 源码: app.json {"pages": ["pages/index/index","pages/logs/logs"],…...
Git 学习笔记 三个区域、文件状态、分支、常用命令
Git 学习 GitGit概念VS Code中使用仓库(repository)示例 Git 使用时的三个区域示例 Git 文件状态示例 Git 暂存区示例 Git 回退版本删除文件忽略文件示例 分支分支的使用分支的合并与删除分支的合并冲突 Git常用命令Git远程仓库 (HTTP)步骤远程仓库 克隆…...
OrangePiLinux连接小米手机使用adb显示“List of devices attached”的问题解决
参考文章adb连接不上手机,提示“List of devices attached” - 简书 (jianshu.com) adb解决报错error: no devices/emulators found error: cannot connect to daemon_adb.exe: no devices/emulators found-CSDN博客 error: no devices/emulators found解决办法-C…...
【Jenkins】data stream error|Error cloning remote repo ‘origin‘ 错误解决【亲测有效】
错误构建日志 17:39:09 ERROR: Error cloning remote repo origin 17:39:09 hudson.plugins.git.GitException: Command "git fetch --tags --progress http://domain/xxx.git refs/heads/*:refs/remotes/origin/*" returned status code 128: 17:39:09 stdout: 17…...
3.1_9 基本分段存储管理
文章目录 3.1_9 基本分段存储管理(一)分段(二)段表(三)地址变换(四)分段、分页管理的对比 总结 3.1_9 基本分段存储管理 (一)分段 进程的地址空间:…...
基于SpringBoot+Druid实现多数据源:baomidou多数据源
前言 本博客姊妹篇 基于SpringBootDruid实现多数据源:原生注解式基于SpringBootDruid实现多数据源:注解编程式基于SpringBootDruid实现多数据源:baomidou多数据源 一、功能描述 支持 数据源分组 ,适用于多种场景 纯粹多库 读写…...
Redis开发规范与性能优化(二)
开发规范与性能优化 3.客户端使用 1.【推荐】避免多个应用使用一个Redis示例 正例:不相干的业务拆分,公共数据库做服务化 2.【推荐】使用带有连接池的数据库,可以有效控制链接,同时提高效率,标准使用方式如代码所示 public c…...
我们是否生活在一个超大型生物的大脑之中?——对多元宇宙观与生命存在形式的哲学探讨
随着科技和哲学思辨的深入,关于人类所处宇宙的本质及我们自身存在的真实性的讨论越发引人入胜。其中一种颇具科幻色彩的观点认为,我们可能生活在某个巨大生物的大脑之中,所有的物理规律、自然现象以及我们的感知体验,都可能是这个…...
【Python数据结构与判断7/7】数据结构小结
目录 序言 整体回忆 定义方式 访问元素 访问单个元素 访问多个与元素 修改元素 添加元素 列表里添加元素 字典里添加元素 删除元素 in运算符 实战案例 总结 序言 今天将对前面学过的三种数据结构:元组(tuple)、列表(…...
探讨:MySQL和PostgreSQL谁更火
一、有人说PostgreSQL比MySQL火🔥 PostgreSQL相比于MySQL越来越受欢迎的原因可以从以下几个方面来阐述: 许可协议灵活性: PostgreSQL采用的是较为宽松的BSD许可证,允许企业在开源的基础上自由使用、修改和分发,而无需…...
hbase和es的选取 hbase与es结合
hbase和es的选取 hbase与es结合 背景介绍 HBase与ElasticSearch是现代应用在处理海量数据的技术架构会经常被使用的两款产品,其中HBase是一个分布式KV系统,具有灵活Schema、水平扩展、低成本、高并发的优势,但在复杂查询、分析能力方面相对…...
GoLang:云原生时代致力于构建高性能服务器的后端语言
Go语言的介绍 概念 Golang(也被称为Go)是一种编程语言,由Google于2007年开始设计和开发,并于2009年首次公开发布。Golang是一种静态类型、编译型的语言,旨在提供高效和可靠的软件开发体验。它具有简洁的语法、高效的编…...
高频面试必备(Java研发岗),一线互联网架构师设计思想解读开源框架
BeanFactory 和 ApplicationContext 有什么区别? 如何用基于 XML 配置的方式配置 Spring? 如何用基于 Java 配置的方式配置 Spring? 请解释 Spring Bean 的生命周期? Tomcat Tomcat 的缺省端口是多少,怎么修改&…...
React——react 的基本使用
前提:安装全局的脚手架,通过create-creat-app 项目名,我们创建好一个新项目,cd进去,通过npm start去运行该项目 注意:简单看下demo的配置,在根目录我们可以看到,没有任何webpack的…...
Unity资源热更新----AssetBundle
13.1 资源热更新——AssetBundle1-1_哔哩哔哩_bilibili Resources 性能消耗较大 Resources文件夹大小不能超过2个G 获取AssetBundle中的资源 打包流程 选择图片后点击 创建文件夹,Editor优先编译 打包文件夹位置 using UnityEditor; using UnityEngine; public cla…...
bootstrap企业网站前端模板
介绍 企业网站前端模板 软件架构 前端所用技术html/css/js/jquery 前端框架bootstrap 安装教程 浏览器本地路径访问发布到服务器比如(tomcat/nginx等)云服务器/虚拟机 网站效果图 网站预览 点击预览 源码地址 https://gitee.com/taisan/company…...
分类预测 | Matlab实现GSWOA-KELM混合策略改进的鲸鱼优化算法优化核极限学习机的数据分类预测
分类预测 | Matlab实现GSWOA-KELM混合策略改进的鲸鱼优化算法优化核极限学习机的数据分类预测 目录 分类预测 | Matlab实现GSWOA-KELM混合策略改进的鲸鱼优化算法优化核极限学习机的数据分类预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 GSWOA-KELM分类࿰…...
软考77-上午题-【面向对象技术3-设计模式】-创建型设计模式02
一、生成器模式 1-1、意图 将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示。 1-2、结构图 Builder 为创建一个 Product 对象的各个部件指定抽象接口。ConcreteBuilder 实现 Builder 的接口以构造和装配该产品的各个部件,定…...
微博热搜榜单采集,微博热搜榜单爬虫,微博热搜榜单解析,完整代码(话题榜+热搜榜+文娱榜和要闻榜)
文章目录 代码1. 话题榜2. 热搜榜3. 文娱榜和要闻榜 过程1. 话题榜2. 热搜榜3. 文娱榜和要闻榜 代码 1. 话题榜 import requests import pandas as pd import urllib from urllib import parse headers { authority: weibo.com, accept: application/json, text/pl…...
C++ 内存管理:从unique_ptr到内存泄漏
引言 在C++编程中,智能指针是管理动态内存的重要工具。它们通过自动管理内存分配和释放,极大减少了程序员的手动管理负担。然而,尽管unique_ptr被设计为一个所有权唯一的智能指针,它仍然可能导致内存泄漏或资源循环引用。本文将通过一个实际例子来探讨unique_ptr如何在不经…...
避坑指南:在Windows/Mac上从零部署Grounding DINO和SAM的完整流程(含模型下载、环境配置)
避坑指南:在Windows/Mac上从零部署Grounding DINO和SAM的完整流程 部署多模态AI模型时,90%的失败发生在环境配置阶段。本文将手把手带你避开所有常见陷阱,从模型下载到最终运行,提供双系统兼容的解决方案。不同于常规教程…...
3大核心功能解锁Wallpaper Engine资源:RePKG工具全方位应用指南
3大核心功能解锁Wallpaper Engine资源:RePKG工具全方位应用指南 【免费下载链接】repkg Wallpaper engine PKG extractor/TEX to image converter 项目地址: https://gitcode.com/gh_mirrors/re/repkg 突破资源限制的三个关键能力 你是否曾遇到这样的困境&a…...
2025最权威的十大AI学术神器推荐榜单
Ai论文网站排名(开题报告、文献综述、降aigc率、降重综合对比) TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 于人工智能生成内容也就是AIGC愈发普及的当前情形下,把它的机械痕迹以及同质化特…...
JAVA重点基础、进阶知识及易错点总结(17)线程安全 synchronized 同步锁
🚀 Java 巩固进阶 第17天 主题:线程安全 & synchronized 同步锁 —— 并发编程的第一道防线📅 进度概览:今天攻克 多线程最核心难题:线程安全。这是面试必考、生产环境必用的知识点,直接决定你的代码能…...
重磅发布!集装箱式SST直流移动智算中心
NEWS3月28日,台达、汉腾科技与龙芯中科联合宣布重磅发布集装箱式 SST(固态变压器)直流移动智算中心,发布活动于台达吴江制造基地举行。这款全新方案以台达 SST 固态变压器为核心能源支撑,深度集成CPU、AI 加速卡与服务…...
新手入门:零基础借助快马生成你的第一个openmaic网页版调用程序
今天想和大家分享一个特别适合新手入门的实践项目——如何借助InsCode(快马)平台快速生成你的第一个openmaic网页版调用程序。作为一个刚接触AI开发的新手,我最初看到各种API文档和代码示例时也是一头雾水,但通过这个可视化工具,居然半小时就…...
Cursor Pro功能突破解决方案:基于cursor-free-vip的完整技术指南
Cursor Pro功能突破解决方案:基于cursor-free-vip的完整技术指南 【免费下载链接】cursor-free-vip [Support 0.45](Multi Language 多语言)自动注册 Cursor Ai ,自动重置机器ID , 免费升级使用Pro 功能: Youve reache…...
实现网页完整捕获:Full Page Screen Capture技术解析与应用指南
实现网页完整捕获:Full Page Screen Capture技术解析与应用指南 【免费下载链接】full-page-screen-capture-chrome-extension One-click full page screen captures in Google Chrome 项目地址: https://gitcode.com/gh_mirrors/fu/full-page-screen-capture-chr…...
终极RPA档案解析指南:unrpa工具的专业实现与优化策略
终极RPA档案解析指南:unrpa工具的专业实现与优化策略 【免费下载链接】unrpa A program to extract files from the RPA archive format. 项目地址: https://gitcode.com/gh_mirrors/un/unrpa 在RenPy视觉小说游戏开发与逆向工程领域,RPA档案格式…...
