display:none与visibility：hidden

最新推荐文章于 2025-07-19 13:57:13 发布
原创 最新推荐文章于 2025-07-19 13:57:13 发布 · 324 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文深入探讨了CSS中display属性与visibility属性的区别，解释了如何仅隐藏元素而不占用空间，以及如何保留元素布局空间的同时实现隐藏效果。

把 display 设置成 none 不会保留元素本该显示的空间


但是 visibility: hidden; 还会保留。


xkf520
关注
css元素隐藏原理及display:none和visibility:hidden
09-22
本文将详细探讨CSS元素隐藏的原理以及display:none和visibility:hidden这两个属性的不同应用及其影响。 首先，CSS元素隐藏的原理主要包括两个方面：空间占据和交互能力。元素被隐藏后，有些方式仍然保留了元素的...
【CSS 面经】display:none 与 visibility:hidden 的区别
lph159的博客
12-10 1290
特性元素是否从页面流中移除是，元素完全移除，页面布局重新计算否，元素仍然占据原来的位置元素是否响应用户交互否，元素完全消失，无法响应任何交互否，元素不可见，但仍然可以响应交互（如点击事件）对布局的影响会改变页面布局，后续元素会填充空白不会改变布局，元素仍然占据空间性能影响因为重新计算了布局，性能影响较大性能影响较小，只是隐藏元素应用场景适用于完全移除元素，且不希望它对页面布局产生任何影响适用于隐藏元素，但保留其占用的空间，如悬浮菜单是否占用空间不占用任何空间仍然占用空间。
深入display:none与visibility:hidden
weixin_50736511的博客
03-20 3716
display:none 我们都清楚当元素设置display:none后，界面上将不会显示该元素，并且该元素不占布局空间，但我们仍然可以通过JavaScript操作该元素（本质上dom是存在的这里跟v-if不一样） 2.display:none具有继承性 3.无法响应任何事件，无论是捕获、命中目标和冒泡阶段均不可以 由于display:none的元素根本不会在界面上渲染，就是连1个像素的都不占，因此自然无法通过鼠标点击命中，而元素也无法获取焦点，那么也不能成为键盘事件的命中目标；而父元素的display为
【前端】display:none和visibility:hidden两者的区别
努力才是唯一的入场券。
06-05 8301
【前端】display:none和visibility:hidden两者的区别
display:none 与 visibility:hidden 的区别
weixin_39307273的博客
02-14 1638
除了是否占据空间外，还有其他区别要注意 1、空间占据 display:none 隐藏后不占据额外空间，相当于删除元素 visibility:hidden占据着空间 opacity:0占据着空间 2、子元素继承 display:none 元素被删除，子元素也会被删除，自然也就不会显示 visibility:hidden 子元素具有继承性，可以通过设置子元素v...
display: none与visibility: hidden的区别
qq_43940172的博客
04-11 767
1. visibility具有继承性，给⽗元素设置visibility:hidden;⼦元素也会继承这个属 性。但是如果重新给⼦元素设置visibility: visible,则⼦元素⼜会显示出来。这个 和display: none有着质的区别 2. visibility: hidden不会影响计数器的计数，如图所示，visibility: hidden虽然让⼀ 个元素不⻅了，但是其计数器仍在运⾏。这和display: none完全不⼀样 3.display;none表示直接消失 代码演示 c
display:none 与 visibility:hidden 的区别是什么？
前端大白话
07-19 767
空间占用：display:none不占空间，visibility:hidden保留空间。性能影响：display:none触发回流（贵），visibility:hidden触发重绘（便宜）。使用场景：少切换用display:none（省内存），多切换用visibility:hidden（更流畅）。记住这3点，以后处理隐藏元素时就不会再踩坑了。
display:none与visibility的区别
weixin_46369590的博客
04-02 272
display:none与visibility:hidden比较
sinat_39592712的博客
01-20 261
父元素为 display: none，子孙元素页在劫难逃；父元素为 visibility: hidden，而子元素可以设置为 visibility:visible，并且生效 设置为 display:none 的元素和设置为 visibility:hidden 的元素都无法获取焦点 设置为 display:none 的元素无法响应任何事件，无论是捕获、命中目标和冒泡阶段均不可以；设置为 visibility:hidden 的元素可在冒泡阶段响应事件，因为设置为 visibility:hidden 的元素的子.
display:none和visibility:hidden的区别
weixin_48494427的博客
03-15 5664
display:none和visibility:hidden的区别 及其案例解释
CSS隐藏元素：display:none vs visibility:hidden
HTTP404_CN的博客
07-16 667
display: none和visibility: hidden是CSS中隐藏元素的两种方式，但存在本质区别。display: none会完全移除元素，不占布局空间，触发重排且不支持动画；而visibility: hidden保留元素空间，仅触发重绘，支持动画效果且子元素可单独显示。前者适用于需要彻底移除元素的场景，后者适合需要保留布局或实现动画的情况。
display:none和visibility:hidden的差别比较与演示代码
01-19
前言： 在使用css隐藏栏位或物件的时候， 常常会使用到display:none和visibility:hidden这两个属性， 但却很容易分不清楚这两个的差别， 或是乾脆同时使用两种属性，来确保物件一定被隐藏， 其实我们可以很简单的来...
(Kriging-NSGA2)克里金模型结合多目标遗传算法求最优因变量及对应的最佳自变量组合研究（Matlab代码实现）
12-16
(Kriging_NSGA2)克里金模型结合多目标遗传算法求最优因变量及对应的最佳自变量组合研究（Matlab代码实现）
中国统计NJ数据-主要农作物种植结构（截至2024年底）.xlsx
12-16
中国统计NJ数据-主要农作物种植结构（截至2024年底）.xlsx
浏览器 12.4.0 安装包
12-16
浏览器 安装包 版本号 12.4.0。
水下图像处理指标（uicm,uism,uiconm,uiqm）和图像处理指标（psnr,ssim）研究（Matlab代码实现）
最新发布
12-16
水下图像处理指标（uicm,uism,uiconm,uiqm）和图像处理指标（psnr,ssim）研究（Matlab代码实现）内容概要：本文围绕水下图像处理指标（uicm, uism, uiconm, uiqm）和通用图像质量评价指标（psnr, ssim）展开研究，重点介绍了这些指标的理论基础、计算方法及其在图像增强与复原效果评估中的应用。文中提供了完整的Matlab代码实现，便于读者复现和验证不同算法对水下图像质量的影响，帮助科研人员定量分析图像处理算法的有效性。; 适合人群：具备一定图像处理基础知识，熟悉Matlab编程，从事计算机视觉、海洋探测、水下机器人等相关领域研究的研究生或科研人员。; 使用场景及目标：①评估水下图像增强算法（如颜色校正、去雾、对比度提升）的质量；②比较不同图像复原模型的性能差异；③为水下视觉系统提供客观的图像质量评判依据； 阅读建议：建议结合Matlab代码逐段理解各指标的实现逻辑，自行导入实际水下图像进行测试，并对比主观视觉效果与客观指标数值之间的关联性，以深入掌握指标的应用边界与局限性。
【嵌入式AIoT】基于边缘智能的轻量化模型部署：STM32与TensorFlow Lite Micro实现手势识别系统
12-16
内容概要：本文系统讲解了嵌入式AIoT从概念到边缘智能落地的全流程，涵盖关键概念如嵌入式AI、AIoT、边缘计算、模型量化与硬件加速，深入剖析模型轻量化、数据预处理优化、任务调度与跨平台部署等核心技术。通过STM32结合TensorFlow Lite Micro实现手势识别的完整案例，展示了从模型训练、量化、移植到MCU端推理的代码级实现，突出低延迟、低功耗的实时性设计，并探讨工业预测性维护、智能家居、农业监测和可穿戴设备等典型应用场景。最后展望了自动化压缩工具链、多模态融合、端云协同学习与超低功耗AISoC等未来方向。; 适合人群：具备嵌入式系统基础、熟悉C/C++与Python编程，有一定AI背景的1-3年经验开发者或物联网、智能硬件工程师。; 使用场景及目标：①掌握在资源受限设备上部署轻量AI模型的核心方法；②理解边缘智能系统的软硬件协同设计逻辑；③实现从传感器数据采集到本地AI推理的端到端开发；④应用于工业、家居、农业、健康等领域的智能化产品开发。; 阅读建议：建议结合STM32开发板与MPU6050传感器动手实践文中代码案例，重点关注模型量化、TFLM集成与RTOS任务调度部分，调试推理延迟与内存占用，深入理解边缘AI的性能优化策略。
【发分布鲁棒优化】一种新颖的基于矩的分布鲁棒优化（DRO）模型，该模型结合了条件风险价值(CVaR)，用于应对电力价格不确定性下的自调度问题【IEEE6、IEEE30、IEEE118节点】MATLAB
12-16
【发分布鲁棒优化】一种新颖的基于矩的分布鲁棒优化（DRO）模型，该模型结合了条件风险价值(CVaR)，用于应对电力价格不确定性下的自调度问题【IEEE6、IEEE30、IEEE118节点】MATLAB内容概要：本文介绍了一种结合条件风险价值（CVaR）的基于矩的分布鲁棒优化（DRO）模型，旨在解决电力价格不确定性下的自调度问题。该模型通过数学建模与优化方法，提升电力系统在面对市场价格波动时的鲁棒性和经济性，适用于IEEE6、IEEE30和IEEE118标准节点系统，并提供MATLAB代码实现，便于科研人员复现实验与进一步研究。; 适合人群：具备电力系统基础知识和优化理论背景，熟悉MATLAB编程，从事电力系统调度、能源管理或相关领域研究的研究生、科研人员及工程技术人员。; 使用场景及目标：①应对电力市场中价格不确定性带来的调度风险；②提升自调度方案的鲁棒性与经济性；③在IEEE标准测试系统上验证DRO-CVaR模型的有效性；④为含高比例可再生能源的电力系统提供风险规避策略支持。; 阅读建议：建议读者结合提供的MATLAB代码，深入理解DRO与CVaR的数学原理及其在电力调度中的建模过程，建议先掌握基础的优化理论与风险度量方法，再进行模型复现与参数敏感性分析，以充分发挥该资源的科研价值。
display:none与visibility:hidden的区别？
11-21
在CSS中，`display:none` 和 `visibility:hidden` 都用于隐藏元素，但它们的行为有很大的不同。 `display:none` 会使元素完全从文档流中移除，该元素不会在页面上占据任何空间，就好像它根本不存在于HTML文档中一样...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值