visibility=hidden, opacity=0，display:none的区别

最新推荐文章于 2022-05-31 22:24:57 发布
最新推荐文章于 2022-05-31 22:24:57 发布
阅读量678 收藏 1
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Liu331013/article/details/115359995
版权

visibility=hidden

MDN官方解释：CSS属性 visibility 显示或隐藏元素而不更改文档的布局。该属性还可以隐藏 table中的行或列。
在这里插入图片描述

visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件

opacity=0

opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的

<style>
.box
最低0.47元/天 解锁文章
Liu331013
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
请说明以下代码的含义，visibility=hidden, opacity=0，display:none
skysys的研究小屋
03-11 344
请说明以下代码的含义，visibility=hidden, opacity=0，display:none opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件 visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件 display=none，把元素隐藏起...
visibility=hidden, opacity=0, display:none之间的区别
whose_moon的博客
08-15 224
opacity=0： 该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事 件，如 click 事件，那么点击该区域，也能触发点击事件的 。 visibility=hidden： 该元素隐藏起 来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件 。 display=none： 把元素隐藏 起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样。 ...
visibility=hidden, opacity=0，display:none
BigDaddy233333的博客
12-09 335
visibility=hidden, opacity=0，display:none opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的。 visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件。 display=none，把元素隐藏起来，并且会改变...
display、visibility、opacity、rgba、z-index隐藏元素的区别
WRian_Ban的小晴天
07-19 4000
display: none;1、浏览器不会生成属性为display: none;的元素。 2、display: none;不占据空间（毕竟都不熏染啦），所以动态改变此属性时会引起重排。 3、display: none;不会被子类继承，但是···子类是不会显示的，毕竟都一起被kill啦。 4、display: none;是个尴尬的属性，translate对她无效。(毫无争议)visibility
CSS隐藏元素 display visibility opacity的区别.docx
07-24
在CSS中，隐藏元素的方法主要有三种：`display:none`、`visibility:hidden`和`opacity:0`，它们各自有不同的特点和适用场景。 1. `display:none`：此属性会使元素完全从页面布局中消失，不占据任何空间。元素及其...
谈谈CSS隐藏元素(display,visibility)的区别
12-03
在CSS中，隐藏元素主要有两种方法：`display: none` 和 `visibility: hidden`，它们在隐藏元素的同时，对页面布局和交互性有着不同的影响。此外，还有一些其他的技术，如设置`height: 0`结合`overflow: hidden`或者...
jquery 设置style:display的方法
10-24
`display:none`会让元素完全不占用空间，而`visibility:hidden`则只是让元素不可见，但仍然保留其占用的空间。在使用jQuery处理显示和隐藏时，确保你理解这些属性之间的区别。 6. **与其他jQuery方法结合使用** `...
interview:面试
03-15
display:none和visibility:hidden的区别 1.visibility:hidden 将元素隐藏，空间不释放 使用后仅仅视觉上看不见 所占据空间仍然存在 2.display:none 将元素显示设为无 空间释放 各种属性丢失 opacity的兼容...
Mega-Menu:使用CSS3的超级菜单
05-09
visibility: hidden; /* 默认隐藏 */ opacity: 0; transition: all 0.3s ease; z-index: -1; /* 防止遮挡父元素 */ } .menu li:hover > .submenu { visibility: visible; opacity: 1; z-index: 1; /* 当鼠标...
visibility：hidden和display：none
weixin_43269298的博客
04-09 517
visibility：hidden和display：none的区别 简单的说，display：inline就是不占位隐藏,
display：none 与 opacity：0 与 visibility：hidden 三者的区别
qq_29022637的博客
10-14 421
（1）display：none 不占空间，不能触发事件 （2）opacity：0 占据空间，可以触发事件 （3）visibility：hidden 占据空间，不能触发事件
前端面试题（2017-12-4）
Vivianluolita的专栏
11-30 697
http://www.100mian.com/mianshi/webqianduan/49981.htmldisplay:none和visibility:hidden的区别？ 1.display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；2.使用visibility
display:none与visibility:hidden不得不说的秘密
shengbeer的博客
03-02 4590
CSS布局中大家可能经常会用到display:none和visibility:hidden，可能很多同学都知道这两个属性是用来隐藏元素的；如果说这两个用来隐藏的属性有什么区别，大家可能会说：display:none 隐藏的元素不占据物理空间,visibility:hidden隐藏的元素占据物理空间。visibility可以被子元素继承，而display:none不能被子元素继承....等。这些是...
display: none和visibility: hidden的区别解释
qq_37734787的博客
11-02 880
很多前端的同学认为visibility: hidden和display: none的区别仅仅在于display: none隐藏后的元素不占据任何空间，而visibility: hidden隐藏后的元素空间依旧保留 ，实际上没那么简单，visibility是一个非常有故事性的属性 1、visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质
visibility:hidden；与display:none；的区别和渐进增强与优雅降级的区别
wx112728的博客
03-16 1731
1.作用不同 visibility:hidden; 将元素隐藏，但是在网页中的位置不会被取缔。 display:none; 将元素的显示设为无，在网页中不占任何位置。 2.定义不同 visibility 属性指定一个元素是否可见的 display 这个属性用于定义建立布局时元素生成的显示框类型 visibility:hidden;会触发重绘（repaint） display:none;会触发回流（reflow） 重绘不一定回流，回流一...
display-none-visibilty-hidden
weboof的博客
11-14 484
visibility=”hidden” visibility=”hidden”表示（仅）隐藏，不可恢复。当visibility被设置为”hidden”的时候，元素虽然被隐藏了，仍然占据它原来所在的位置。visibility会保留元素的位置。元素被隐藏之后，就不能再接收到其它事件了，也不能再接收响应到事件了，因此也就无法通过JS令其显示出来。 同时，该属性不会引起页面的reflow和repai
三种隐藏方式：display:none,visibility:hidden,opacity:0的区别
m0_52943868的博客
04-01 3767
1、display:none隐藏 display:black 显示 2、visibility: hidden 隐藏 visibility: visible 显示 3、 opacity: 0 隐藏 opacity：1 显示 其三者的区别： 1、时间绑定 display 的元素已经不再页面 所及无法触发上面的绑定时间 visibility: hidden ：元素上绑定的时间也无法触发 opacity：透明度为0 其实际还在 所及可以触发上边的绑定时间 2、对于空间的占用 display:n..
visibility:hidden和display:none的区别
m0_71231013的博客
05-31 2273
1、作用不同:visibility:hidden将元素隐藏，但是在网页依然占用位置。display:none将元素的显示设为无，即在网页中不占任何的位置。2、使用后HTML元素有所不同:visibility:hidden，使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。display:none，使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将被‘抵消’即不存在。3、定义不同:visibility属性指定一个元
visibility: hidden ，opacity display:none
最新发布
06-01
这三个CSS属性都可以用于隐藏元素，但有一些区别： ...如果需要隐藏元素但仍占用布局空间，则使用`visibility: hidden`或`opacity: 0`；如果需要完全移除元素并释放布局空间，则使用`display: none`。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值