display:none、visibility:hidden和opacity:0的区别

最新推荐文章于 2023-05-18 10:02:27 发布
最新推荐文章于 2023-05-18 10:02:27 发布
阅读量1.2k 收藏 4
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/meism5/article/details/105421487
版权

是否脱离文档流

  • display:none：使元素脱离文档流，不占据原来的空间，会引起页面的重排
  • visibility:hidden：不会脱离文档流，元素不可见仍然占据原来的位置
  • opacity:0：同 visibility:hidden

 

继承

  • display:none：子元素仍具有 display 属性，与父元素一起隐藏
  • visibility:hidden：子元素设置为 visibility:visible，可以单独显示
  • opacity:0：同 display:none

 

事件

  • display:none：无法添加事件
  • visibility:hidden：无法添加事件
  • opacity:0：可以添加事件

 

 

【Java面试题与答案】整理推荐

 

ConstXiong
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
RGBA和OPACITY的透明效果有何不同 DISPLAY:NONE和VISIBILITY：HIDDEN的区别
IT修真院：初学者转行到互联网的聚集地
05-31 438
这里是修真院前端小课堂，每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能，本篇分享的是： 【 RGBA和OPACITY的透明效果有何不同 DISPLAY:NONE和VISIBILITY：HIDDEN的区别】 大家好，我是IT修真院北京分院第23期的学员郭婷婷，一枚正直纯洁善良的WEB前端程序员...
CSS隐藏元素 display visibility opacity的区别.docx
07-24
在CSS中，隐藏元素的方法主要有三种：`display:none`、`visibility:hidden`和`opacity:0`，它们各自有不同的特点和适用场景。 1. `display:none`：此属性会使元素完全从页面布局中消失，不占据任何空间。元素及其...
display: none, visibility: hidden 和 opacity: 0的比较
摇摆小仙的博客
06-14 1154
1.关于是否脱离文档流 display: none会使元素脱离文档流,不占据原来的空间,会引起页面的重排 visibility: hidden和opacity: 0 虽然会使元素不可见,但是元素仍然占据原来的位置,不会脱离文档流 2.关于继承 display: none,虽然被隐藏的子元素也会一起隐藏,但是子元素并不继承display: none,子元素仍然具有本身的display属性,但...
display: none、visibility:hidden和opacity: 0的区别
weixin_45663697的博客
05-31 1260
1. display: none 设置该属性后，该元素和它所有的后代元素都会被隐藏。 无法使用屏幕阅读器等辅助设备访问 占据的空间消失 <div> <p>A没有设置display:none</p> <p style="display: none;">B设置display:none</p> <p>C没有设置display:none</p> </div> 效果图 2. vi
display: none、visibility: hidden与opacity: 0的区别
码飞_CC的博客
01-21 2131
文章目录1. display: none、visibility: hidden与opacity: 0的区别2. 补充：其他隐藏元素的方法 1. display: none、visibility: hidden与opacity: 0的区别 display: none、visibility: hidden与opacity: 0都可以让元素隐藏，它们之间的区别见下表： 特性（行为） displa...
opacity: 0、visibility: hidden、display: none 有啥区别
最新发布
zhoukaibai的博客
05-18 1408
这三种方式的使用场景分别是：● opacity: 0：隐藏元素，但是需要占据原来的空间；需要注意的是，opacity 属性不仅影响元素的可见性，还影响其交互行为（例如点击事件的响应）● visibility: hidden：隐藏元素，但是需要占据原来的空间，并且保持元素布局不变；● display: none：隐藏元素，并且不需要占据原来的空间，也不影响其他元素的布局。
jquery 设置style:display的方法
10-24
当处理`display`时，还需要注意其他可能影响元素可见性的CSS属性，如`opacity`（透明度）和`visibility`（可见性）。`display:none`会让元素完全不占用空间，而`visibility:hidden`则只是让元素不可见，但仍然保留...
谈谈CSS隐藏元素(display,visibility)的区别
12-03
在CSS中，隐藏元素主要有两种方法：`display: none` 和 `visibility: hidden`，它们在隐藏元素的同时，对页面布局和交互性有着不同的影响。此外，还有一些其他的技术，如设置`height: 0`结合`overflow: hidden`或者...
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; /* 当鼠标...
display：none 与 opacity：0 与 visibility：hidden 三者的区别
qq_29022637的博客
10-14 428
（1）display：none 不占空间，不能触发事件 （2）opacity：0 占据空间，可以触发事件 （3）visibility：hidden 占据空间，不能触发事件
【CSS】display:none、opacity:0、visibility:hidden 之间的区别
Superman_H的博客
03-05 344
display:none、opacity:0、visibility:hidden [结构]、[继承]、[性能] 的比较
三种隐藏方式：display:none,visibility:hidden,opacity:0的区别
m0_52943868的博客
04-01 3778
1、display:none隐藏 display:black 显示 2、visibility: hidden 隐藏 visibility: visible 显示 3、 opacity: 0 隐藏 opacity：1 显示 其三者的区别： 1、时间绑定 display 的元素已经不再页面 所及无法触发上面的绑定时间 visibility: hidden ：元素上绑定的时间也无法触发 opacity：透明度为0 其实际还在 所及可以触发上边的绑定时间 2、对于空间的占用 display:n..
【css】display：none、visibility：hidden 和 opacity：0 之间的区别
t13965688123的博客
05-11 1257
1、display:none隐藏， display:black 显示； 2、visibility: hidden 隐藏， visibility: visible 显示； 3、 opacity: 0 隐藏， opacity：1 显示； 不同点： 1，是否占据空间 display:none 隐藏之后不占位置，该元素和它所有的后代元素都会被隐藏，也无法使用屏幕阅读器等辅助设备访问； visibility: hidden 隐藏元素占用与未隐藏时一样的空间，会影响页面布局； opacity: 0 是让元素产生透明度，
display:none； visibility:hidden； opacity:0 区别
weixin_36430673的博客
01-11 1103
display:none 1、DOM结构：浏览器不会渲染display为none的元素，不占据空间； 2、事件监听：无法进行DOM事件监听； 3、性能：动态改变DOM结构，会引起重排，性能较差； 4、继承：不会被子元素继承，因为子元素不会被渲染； 5、transition:不支持display。 visibility:hidden 1、DOM结构：元素被隐藏，还存在文档流中，占据一定的空间； 2、事件监听：无法进行DOM事件监听 3、性能：动态改变此属性会引起重绘，性能友好； 4、继承：
display:none和visibility:hidden和opacity:0的区别
qq_40664253的博客
07-25 1602
css让元素不可见的方法有很多种，裁剪、定位到屏幕外边、透明度变换等都是可以的。但是最常用两种方式就是设置元素样式为display: none或者visibility: hidden。 区别： display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素； visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素； 使用vi...
【CSS】CSS元素隐藏：display:none | visibility:hidden | opacity:0 的区别
ColdCoder的博客
04-07 1328
我们有几种方式可以隐藏一个元素： CSS position绝对定位，使元素位于可视范围外 type="hidden"的表单元素。 宽度和高度都显式设置为0。 CSS display的值是none。 CSS visibility的值是hidden CSS opacity的值是0 下面重点是说一下常用即面试常被问到的三种隐藏元素方式：display: none | visibility: hidden opacity: 0 基本功能： display: none: 元素自身及后代元素都会隐藏，隐藏后的元素无
visibility=hidden, opacity=0，display:none
BigDaddy233333的博客
12-09 339
visibility=hidden, opacity=0，display:none opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的。 visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件。 display=none，把元素隐藏起来，并且会改变...
display:none和visibile:hidden opacity0重绘重排
05-17
`display:none`和`visibility:hidden`以及`opacity:0`在页面中都可以隐藏元素，但它们的实现方式不同，会对页面的重绘重排产生不同的影响。 `display:none`会将元素从文档流中完全删除，这会导致元素不再占据任何空间，而且会导致页面的重排和重绘。 `visibility:hidden`会将元素隐藏起来，但是元素依然占据着原来的空间，这也会导致页面的重排和重绘。 `opacity:0`会将元素变得透明，但元素依然占据着原来的空间，这同样会导致页面的重排和重绘。 因此，如果需要在页面中隐藏元素，可以根据实际需要选择不同的方式。如果需要隐藏的元素不再需要使用，可以使用`display:none`；如果需要隐藏的元素需要重新显示，可以使用`visibility:hidden`或者`opacity:0`。但是需要注意，使用`display:none`将导致元素完全从文档流中删除，可能会影响到其他元素的布局，因此在使用时需要谨慎考虑。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值