display:none与visibility的区别

最新推荐文章于 2025-11-29 11:13:27 发布
最新推荐文章于 2025-11-29 11:13:27 发布 · 175 阅读 · 0
文章标签：

#css #visibility #display

本文深入探讨了visibility属性的多种用途，包括如何实现元素的隐藏与可见状态切换，以及不同值（visible, hidden, collapse, inherit）在实际场景中的应用。详细解释了visibility对布局的影响，并强调了其在不同浏览器版本之间的兼容性。

 

多可以用于页面元素的隐藏。

 

但是visibility:hidden会占地方。

 

补充一下visibility的可能的值

 

  • visible   默认值。元素可见
  • hidden 元素不可见
  • collapse  当在表格元素中使用时，此值可删除一行或一列，但是不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素，会呈现”hidden“
  • inherit  从父元素继承visibility属性的值。
注意：
  1.    所有主流浏览器多支持visibility属性
  2.    任何 IE的版本多不支持inherit和collapse

 

display:none和visibility:hidden的差别比较与演示代码
01-19
前言： 在使用css隐藏栏位或物件的时候， 常常会使用到display:none和visibility:hidden这两个属性， 但却很容易分不清楚这两个的差别， 或是乾脆同时使用两种属性，来确保物件一定被隐藏， 其实我们可以很简单的来...
visibility:hidden和display:none的区别
m0_71231013的博客
05-31 2537
1、作用不同:visibility:hidden将元素隐藏，但是在网页依然占用位置。display:none将元素的显示设为无，即在网页中不占任何的位置。2、使用后HTML元素有所不同:visibility:hidden，使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。display:none，使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将被‘抵消’即不存在。3、定义不同:visibility属性指定一个元
display:none和visibility:hidden的区别
热门推荐
flower521528的博客
03-16 1万+
display：none 和visibility：hidden都可以实现让元素隐藏的效果，但原理是大不相同 1.display:none是让这个元素失去块元素的效果，其本身这个元素也是直接消失，会影响到布局问题。 2.visibility:hidden:可以让元素消失，属于css样式，它只是简单的让元素看不见，但本身的位置还在，如果对div进行hidden，那么div除了看不见，其他所有的样式都在。 ...
强大的CSS：focus-visible伪类真的太6了！
web前端开发学习教程
05-22 1661
一、快速了解CSS :focus-visible伪类 :focus-visible伪类是非常年轻的一个伪类，目前仅Chrome浏览器标准支持，但足够了。如果你是一个深入用户体验的开发者，这个伪类会非常有用。 :focus-visible伪类应用的场景是：元素聚焦，同时聚焦轮廓浏览器认为应该显示。 是不是很拗口？规范就是这么定义的。:focus-visible的规范并没有强行约束匹配逻辑，而是交给了...
元素获得焦点focus()的问题
~~
05-11 2021
1.display:none的元素无法获得焦点。 如果是之前被display:none的元素，想在display:block的时候，获得焦点，display:block语句必须在focus语句之前。
display:none和visibility:hidden两者的区别
weixin_43535265的博客
03-09 2294
一、相同点 display:none和visibility:hidden 都能把网页上的某元素隐藏起来 二、不同点 示例代码如下： <!DOCTYPE html> <html> <head> <style> .hidden1 { display:none; } .hidden11 { display: inherit; } .hidden12 { display: block; } .hi
css元素隐藏原理及display:none和visibility:hidden
09-22
在介绍了这么多隐藏元素的方法之后，我们要特别注意display:none和visibility:hidden两种属性的主要区别。这两者之间的差异主要表现在以下几个方面： 1. 空间占据：display:none;隐藏的元素不占据任何布局空间，而...
深入display:none与visibility:hidden
weixin_50736511的博客
03-20 3710
display:none 我们都清楚当元素设置display:none后，界面上将不会显示该元素，并且该元素不占布局空间，但我们仍然可以通过JavaScript操作该元素（本质上dom是存在的这里跟v-if不一样） 2.display:none具有继承性 3.无法响应任何事件，无论是捕获、命中目标和冒泡阶段均不可以 由于display:none的元素根本不会在界面上渲染，就是连1个像素的都不占，因此自然无法通过鼠标点击命中，而元素也无法获取焦点，那么也不能成为键盘事件的命中目标；而父元素的display为
当前窗口获得焦点js事件【visibilitychange】
huangzhenkun94的博客
06-27 1万+
当前窗口获得焦点js事件，html5发布之前我们使用window.onfocus和window.onblur来获得窗口焦点和失去窗口焦点，  监听 onfocus() 和window.onblur()事件实现 //当前窗口得到焦点  window.onfocus = function() {    //播放动画或视频  };    //当前窗口失去焦点  window.onblur =
解决display none到display block 渲染时间过长的问题，以及bootstrap模态框导致其他框中input不能获得焦点问题的解决...
01-18 967
在做定制页面的时候，遇到这么一个问题，因为弹出框用的是bootstrap的自带的弹出框，控制显示和隐藏也是用自带的属性控制 控制显示，在触发的地方 例如botton上面加上 data-toggle="modal" data-target="#myModal" 控制关闭，在取消或者确定的地方加上 <button type="button" class="btn ...
02.CSS变量 (Variables)
粉丝们务必加入微信粉丝群
11-29 224
CSS变量（也称为CSS自定义属性）是现代CSS中最强大的特性之一。它们允许你定义可重用的值，创建动态主题系统，并大大提高CSS代码的可维护性。CSS变量让你能够创建动态的颜色方案和主题，可以在运行时进行更改。理解CSS变量的基本概念和语法。掌握变量的定义、使用和作用域。了解CSS变量的高级应用技巧。掌握浏览器兼容性和最佳实践。学会创建动态主题系统。
JAVA毕业设计含文档和代码springboot凉州区助农惠农服务平台
最新发布
11-30
JAVA毕业设计含文档和代码springboot凉州区助农惠农服务平台
【四轴飞行器的位移控制】控制四轴飞行器的姿态和位置设计内环和外环PID控制回路（Simulink仿真实现）
11-30
【四轴飞行器的位移控制】控制四轴飞行器的姿态和位置设计内环和外环PID控制回路（Simulink仿真实现）内容概要：本文围绕四轴飞行器的位移控制展开，重点介绍如何通过设计内环和外环PID控制回路来实现对其姿态和位置的精确控制。外环负责根据期望位移生成姿态指令，内环则依据这些指令调节飞行器的实际姿态，从而实现稳定的位置跟踪。整个控制系统在Simulink环境中进行建模与仿真，便于验证控制策略的有效性与鲁棒性。文中详细阐述了四轴飞行器的动力学模型、控制结构设计原理以及PID参数整定方法，帮助读者深入理解飞行器控制的核心机制。; 适合人群：具备自动控制理论基础和Simulink仿真经验的高校学生、科研人员及从事无人机控制开发的工程师。; 使用场景及目标：①用于教学实践中帮助学生掌握多变量控制系统的设计方法；②为无人机姿态与位置控制系统的开发提供可复现的仿真框架；③支持进一步研究高级控制算法（如串级控制、自适应控制）在飞行器中的应用。; 阅读建议：建议读者结合Simulink模型同步操作，动手调试PID参数以观察系统响应变化，加深对内外环协同控制机制的理解，并可在此基础上拓展为非线性或智能控制策略的研究。
【嵌入式开发】Rust与C++互操作技术指南：基于FFI与bindgen的混合编程及渐进式迁移方案设计
11-30
内容概要：本文是一份关于在嵌入式环境中实现Rust与C++互操作的工程实践指南，系统介绍了如何将Rust逐步集成到现有的C/C++驱动框架中。内容涵盖互操作机制（如FFI、extern "C"、bindgen工具）、构建系统集成（Cargo与Make/CMake等）、内存与所有权管理、中断处理、调试测试流程及性能优化，并提供完整的实战案例——用Rust实现I2C传感器驱动并集成到C项目中。文章强调安全性、兼容性和渐进式迁移策略，附有大量可运行代码和常见问题解决方案。; 适合人群：具备一定嵌入式开发经验，熟悉C/C++，并希望引入Rust提升代码安全性的中高级工程师或技术团队；适合正在考虑语言迁移或模块重构的开发者； 使用场景及目标：①在现有C/C++项目中安全嵌入Rust模块，降低内存安全隐患；②实现高效跨语言调用，优化关键组件的可靠性与维护性；③通过bindgen自动化绑定、联合构建与调试，完成实际驱动开发与性能验证； 阅读建议：建议结合示例代码动手实践，重点关注FFI边界设计、内存安全规则和构建脚本配置，在真实嵌入式平台上进行调试与测试以掌握全流程。
zhongyanghan_Risk-prediction-of-credit-card-transaction-fraud-based-on-L
11-30
zhongyanghan_Risk-prediction-of-credit-card-transaction-fraud-based-on-L
Garfield-0927_JavaExperiment_34704_1763630740306.zip
11-30
Garfield-0927_JavaExperiment_34704_1763630740306
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、付费专栏及课程。

余额充值