opacity: 0、 visibility: hidden、display: none 对比记录

最新推荐文章于 2023-12-29 23:00:00 发布
最新推荐文章于 2023-12-29 23:00:00 发布
阅读量159 收藏
点赞数
分类专栏： Css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38211541/article/details/109755540
版权

简单记录：

display:none:

会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击。

更改时会触发回流，性能消耗大

不可继承，影响子元素

visibility: hidden:

不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击

更改时会触发重绘，性能消耗小

可继承，不影响子元素

opacity: 0:

不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击

更改时会触发重绘，性能消耗小

不可继承，影响子元素

野生松
关注
专栏目录
分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景
liuhao9999的博客
03-22 376
结构：display:none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击， visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击 opacity: 0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击 继承：display: none：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。visibility: hidden：是继承属性，子孙节点消失由于继承了hidden，
display:none、visibility:hidden与opacity:0直间到底什么区别（笔试题）
m0_60622481的博客
04-18 296
1、空间占据方面 display:none隐藏后不会占据原有空间，会产生回流和重绘 visibility:hidden和opacity:0元素隐藏，但仍然占据着原有空间，它们俩只会引起页面重绘。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&g.
比较opacity:0、visibility:hidden、display:none，优劣和适用场景
Menqq的博客
03-16 1230
display: none DOM 结构：浏览器不会渲染 display 属性为 none 的元素，会让元素完全从渲染树中消失，渲染的时候不占据任何空间； 事件监听：无法进行 DOM 事件监听，不能点击； 性能：修改元素会造成文档回流（reflow 与 repaint）,读屏器不会读取display: none元素内容，性能消耗较大； 继承：是非继承属性，由于元素从渲染树消失，造成子孙节点消失，即使修改子孙节点属性子孙节点也无法显示，毕竟子类也不会被渲染； 场景：显示出原来这里不存在的结构； tran..
opacity: 0、visibility: hidden、display: none 有啥区别
zhoukaibai的博客
05-18 1524
这三种方式的使用场景分别是：● opacity: 0：隐藏元素，但是需要占据原来的空间；需要注意的是，opacity 属性不仅影响元素的可见性，还影响其交互行为（例如点击事件的响应）● visibility: hidden：隐藏元素，但是需要占据原来的空间，并且保持元素布局不变；● display: none：隐藏元素，并且不需要占据原来的空间，也不影响其他元素的布局。
css属性opacity: 0；display: none；visibility: hidden的区别；隐藏页面中的某个元素的方法有哪些？rgba()和opacity的透明效果有什么不同?
最新发布
星辰迷上大海的博客
12-29 974
opacity: 0;、visibility: hidden;、display: none; 三者都是让对应的元素不可见。
opacity: 0、visibility: hidden、display: none 优劣和适用场景
qazxbjp2010的博客
03-18 338
素display:none DOM 结构：元素完全从渲染树中消失，不占据空间； 子节点：不会被子节点继承，子节点设置display:block也无法显示； 性能：改变此属性时会引起重排和回流，性能较差；但由于修改被隐藏的子节点时不会进行重排，所以在大量修改子节点样式时，先隐藏修改完在显示会有较好的性能； Event事件：无法进行 DOM 事件监听、无法被选中； transition：tra...
opacity:0跟display:none
weixin_30707875的博客
07-01 149
opacity：0；隐藏文本内容，但是位置还在，点击还有效果出现； display：none；隐藏文本内容，点击无效果。 opacity兼容性： filter:alpha(opacity=50); /* IE */ -moz-opacity:0.5; /* 老版Mozilla */ -khtml-opacity:0.5; ...
css元素隐藏原理及display:none和visibility:hidden
09-22
本文将详细探讨CSS元素隐藏的原理以及display:none和visibility:hidden这两个属性的不同应用及其影响。 首先，CSS元素隐藏的原理主要包括两个方面：空间占据和交互能力。元素被隐藏后，有些方式仍然保留了元素的...
visibility: hidden ，opacity display:none
06-01
这三个CSS属性都可以用于隐藏元素，但有一些区别： ...如果需要隐藏元素但仍占用布局空间，则使用`visibility: hidden`或`opacity: 0`；如果需要完全移除元素并释放布局空间，则使用`display: none`。
RGBA和OPACITY的透明效果有何不同 DISPLAY:NONE和VISIBILITY：HIDDEN的区别
IT修真院：初学者转行到互联网的聚集地
05-31 459
这里是修真院前端小课堂，每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能，本篇分享的是： 【 RGBA和OPACITY的透明效果有何不同 DISPLAY:NONE和VISIBILITY：HIDDEN的区别】 大家好，我是IT修真院北京分院第23期的学员郭婷婷，一枚正直纯洁善良的WEB前端程序员...
opacity:0, visibility:hidden, display:none的对比区别
weixin_61766112的博客
10-09 384
opacity:0, visibility:hidden, display:none的对比区别
opacity:0,display:none和visibility:hidden的区别
weixin_46100406的博客
03-30 182
opacity:0 隐藏起来的元素是占空间的，并且绑定的事件仍然会触发。 visibility:hidden 隐藏起来的元素是占空间的，并且绑定的事件不会触发。 1、visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别...
关于CSS中opacity:0, visibility:hidden, display:none的对比区别
shallow77的博客
07-22 1793
文章目录前言opacity:0visibility:hiddendisplay:none总结 前言 前几天参加笔试的时候被考到opacity这个CSS属性，因为平时自己写代码没用过，所以懵了，现在特此总结一下 opacity:0 这个属性是设置元素透明度用的，设置opacity:0后元素会直接变成透明，但还会占用着页面元素的位置，并且设置的事件能够触发。相当于一个透明人站在你面前，虽然看不见，但依旧能触摸到。 visibility:hidden 这个属性是设置元素是否可见的，设置visibility:.
display：none、visiblity: hidden、opacity: 0区别
weixin_44941889的博客
11-10 1165
display：none、visiblity: hidden、opacity: 0均是用来隐藏元素的。 1、display: none。 DOM结构：被设置了display:none的元素浏览器不会渲染该元素在页面中，也根本不会占据位置； 事件：无法进行事件监听，点击事件没有生效； 性能：通过js无法获取到该元素身上的一些属性，并且通过动态的改变的display属性，会让页面反复渲染，引起页面重排，性能较差; 继承：不会被子类继承，因为自己没被渲染; transition: 不支持; 如图：
关于opacity:0、visibility:hidden、display:none三个属性的比较以及拓展
问白的博客
03-04 8384
今天上午看某头条的时候有个刚入门的前端小伙伴提问道opacity:0、visibility:hidden、display:none。这三个属性的区别，这三个属性在我们日常开发中也算是用到频率也是蛮多的，所以干脆就就把这三个属性放在一起，配合实例做一个比较。首先这三个属性依次设置为0/hidden/none都可以使得用户看不见页面上的元素，不过他们之间还是有区别的，不然若是一样的话，也就没必要用三个...
display none 和 opacity 0 二者的区别辨析
汪子熙的专家技术分享
10-03 126
是一种CSS属性，用于完全隐藏HTML元素并从页面布局中移除它。使用此属性后，元素不会显示在页面上，也不会占据空间，因此对用户来说完全不可见，并且不会响应任何交互事件，包括键盘和屏幕阅读器。opacity: 0也是一种CSS属性，用于使元素变为完全透明，但元素仍然存在于页面布局中。换句话说，元素仍然占据空间，并保持其原始大小和位置，但对用户来说是不可见的。然而，与不同，元素仍然可以接收交互事件，包括键盘和屏幕阅读器事件。和opacity: 0。
CSS中，display：none、visibility：hidden 和 opacity：0 之间的区别
LoveHaixin的博客
09-19 816
display:none 隐藏之后不占位置，该元素和它所有的后代元素都会被隐藏，也无法使用屏幕阅读器等辅助设备访问；visibility:hidden 会被子元素继承，通过设置子元素visibility:visible来显示子元素。opacity:0 会被子元素继承，但是不能设置子元素opacity:0来重新显示。display:none 不会被子元素继承，父元素都不存在了，子元素也不会显示出。display:none 的元素都已经不再页面存在了，因此无法触发它绑定的事件。5、是否会产生生回流和重绘。
关于opacity
quguoqing188的博客
06-30 463
opacity:0filter:alpha(opacity=0)  兼容IE8一下版本的写法
CSS 隐藏属性 -- display:none、visibility:hidden、opacity:0三者的区别
19年的墨先生的博客
09-27 1555
一、空间占据 display:none 不会占据额外空间，会产生重排（回流）和重绘 visibility:hidden和opacity:0 会占据空间，只会产生重绘 visibility:hidden 不会影响列表的计数 <ol> <li>元素1</li> <li style=" visibility:hidden">元素2</li> <li>元素3</li> </ol> // 1.元素1 //
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值