visibility、display、opacity的区别？

最新推荐文章于 2023-09-27 16:04:01 发布
最新推荐文章于 2023-09-27 16:04:01 发布
阅读量202 收藏
点赞数
分类专栏： 前端 文章标签： html css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MCCLS/article/details/128915787
版权

visibility、display、opacity的区别？

  1. visibility 设置为hidden时，元素不可见，但是占位。元素在页面结构中不消失（默认值为visible为可见）
  2. display 设置为none时，元素不可见，不占位，元素在页面结构中消失
  3. opacity 通过透明度，来实现元素不可见，为0时则不可见，占位，元素在页面结构中不消失
兜里揣着星星
关注
专栏目录
CSS——display、visibility、opacity隐藏元素的区别
weixin_43311978的博客
07-09 557
.box1 { width: 200px; height: 200px; background-color: yellow; } .box2 { width: 200px; height: 200px; background-color: red; } <div class="box1"> box1 </div> <div class="box2"> box2 </div> document.querySelector(".box1").o
Vue | 显示切换（v-if与v-show,display,visibility与opacity）
热门推荐
MGsniper的博客
01-16 3万+
在Vue中，实现显示切换，有以下几种手段： 1. 使用v-if指令 2. 使用v-show指令 3. 动态绑定display 4. 动态绑定visibility 5. 动态绑定opacity
visibility、display、opacity的区别
jjjh968的博客
09-07 416
visibility、display、opacity理解： opacity 用来设置透明度 display 定义建立布局时元素生成的显示框类型 visibility 用来设置元素是否可见。 相同点： 设置visibility:hidden，display:none，opacity:0 ，都能隐藏dom元素，使元素在页面上看不见 不同点： display: none; 1.display: none;不占据空间，把元素隐藏起来，所以动态改变此属性时会引起重排...
visibility，display，opacity的区别？
想好了再写！
08-11 3558
相同点： visibility和display都能实现元素的显示和隐藏 display: none; 隐藏元素 display: block; 显示元素 display: inline; 元素转换为行内元素 display: inline-block; 元素转换为行内块元素 visibility:hidden; 隐藏元素 visibility: visible;显示元素 opacity: 0是视觉上消失了，透明度为0，在文档流中站位，浏览器会解析 区别： 1.性能比较 使用visibility:hid
visibility，opacity 与display的区别
qq_45904018的博客
07-13 321
visibility ，opacity,display
visibility 和 display 、 opacity的差别
前端小师姐迪迪_的博客
03-22 555
display: none; 元素消失，脱离文档流。 造成页面重排和重绘。 子元素跟随父元素被隐藏，并且无法单独显示 绑定的事件也无法触发。 opacity: 0; 元素透明度为0； 造成页面重绘不重排； 子元素 opacity:1 无效，仍不显示； 绑定的事件仍旧可以触发。 visibility:hidden; 元素不可见； 子元素设置 visibility:visible; 后，子元素显示； 绑定的事件不能触发； 共同点： DOM节点是存在的，仍旧可以用js 操作DOM。 ...
opacity/visibility/display 区别对比
高先生的猫
04-26 3895
opacity 用来设置透明度 display 定义建立布局时元素生成的显示框类型 visibility 用来设置元素是否可见。 opacity、visibility、display 这三个属性分别取值 0、hidden、none 都能使元素在页面上看不见，但是他们在方方面面都还是有区别的。 1、display:none （1）、浏览器不会生成属性为display: none;的元素。 （2）、d...
CSS隐藏元素 display visibility opacity的区别.docx
07-24
在CSS中，隐藏元素的方法主要有三种：`display:none`、`visibility:hidden`和`opacity:0`，它们各自有不同的特点和适用场景。 1. `display:none`：此属性会使元素完全从页面布局中消失，不占据任何空间。元素及其...
前端4-8-1：Doctype、display、visibility、opacity、全局属性、事件与方法
Yummy的博客
04-10 1242
1、下面有关html Doctype的描述，说法错误的是？ A、它的责任就是告诉浏览器文档使用哪种html或者xhtml规范 B、不同文档模式主要影响CSS内容的呈现，尤其是浏览器对盒模型的解析 C、不同浏览器在混杂模式下的行为差异非常大，如果不使用某些hack技术，跨浏览器的行为根本就没有一致性可言。 D、如果在文档开始处没有发现文档类型声明，则所有浏览器都会默认开启严格模式 【解析】 D：Doctype不存在或错误，浏览器默认混杂模式 【知识点：Doctype】 DOCTYPE文档类型.
.display、visibility、opacity之间的区别
03-30
1. display：用于控制元素的显示方式，包括none、block、inline、...综上所述，display和visibility都可以控制元素的显隐，但display会影响元素的布局，而visibility不会影响布局；而opacity则是控制元素的透明度。
display、visibility、opacity区别
liujiang的博客
07-11 422
display: none; DOM 结构：浏览器不会渲染 display 属性为 none 的元素，不占据空间； 事件监听：无法进行 DOM 事件监听； 性能：动态改变此属性时会引起重排，性能较差； 继承：不会被子元素继承，毕竟子类也不会被渲染； transition：transition 不支持 display。 visibility: hidden; DOM 结构：元素被隐藏，但是会被渲染不会消失，占据空间； 事件监听：无法进行 DOM 事件监听； 性 能：动态改变此属性时会引起重绘，性能较高；
display、visibility、opacity之间的区别(分享)
weixin_60547084的博客
06-12 671
子元素复原：父元素被隐藏，子元素设置显示的属性，子元素是可以显示的 被遮挡元素触发事件：就是隐藏之后，该元素背后的元素是否还可以正常触发事件，因为 opacity 只是变的透明，并没有真正意义上的隐藏，所以是会影响背后的元素的...
display、visibility和opacity的区别 及 v-if和v-show
qq_41397118的博客
07-19 747
display、visibility和opacity的区别 共同点：都可以隐藏元素，让元素不可见 区别： display: none （1）DOM 结构：浏览器不会渲染 display 属性为 none 的元素，不占据空间； （2）事件监听：无法进行 DOM 事件监听； （3）性能：动态改变此属性时会引起重排，性能较差； （4）继承：不会被子元素继承，毕竟子类也不会被渲染； （5）transition：transition 不支持 display。 visibility: hidden （1）DOM 结.
cocos creator移动事件和 opacity
W_han__的博客
04-06 5016
当node在节点node的touchEvent中 如果节点node在touch_move中有opacity的改变。在touch_end或者touch_cancel事件中，在还原的时候会出现一些问题。 出现问题的假设是该node有多个子节点，而子节点会随着父节点node的改变也会发生改变，这点很神奇，这个bug找了好长时间才找到， 在开始设置改变该node的opacity时，只要设置一个属性就
cocos2dx3.x中Opacity和visible
qq_41620823的博客
09-19 564
当我们需要场景中的某个精灵不可见时可能会面临两种选择，特别地，我们可能经常使用Fadein和Fadeout表示淡入淡出的特效，而当我调用Fadeout淡出精灵时，其实本质上是在对精灵的Opacity，即精灵的透明度进行操作。透明度操作并不会影响精灵的Visible即可见属性。 综合来讲，当精灵的Opacity属性设置为0时，在场景中是不可见的，但是其visible为true，也就是说该精灵仍然被渲染；而当我们将该精灵的visible设置为fasle时，尽管该精灵不可见，但其实其opacity为25...
CSS的display、visibility、overflow：hidden属性关于显示与隐藏的占位问题
6747的博客
08-01 2341
CSS的display、visibility、overflow：hidden属性关于显示与隐藏的占位问题
cocos2dx中Opacity属性及相关操作(1)
mdifferent的专栏
10-02 1万+
Opacity指的是Node的透明度，从0~255之间的一个整数，通过Node的setOpacity来进行设置：
border 不占位_占位和不占位隐藏代码display和visibility的区别
weixin_29169899的博客
12-30 648
display:none;不占位隐藏visibility:hidden;占位隐藏visibility隐藏的对象还保留对象显示时所占的物理空间，display则不保留。vilibility：hidden(隐藏)、visible(显示)style="vislbility:hidden"display：none(隐藏)、block(显示)style="display:none"可以保存下面的代码看看效果...
元素隐藏之display:none、visibility:hidden、opacity:0、overflow:hidden区别
最新发布
酱爆 Crazy
09-27 321
● visibility: hidden，会被子元素继承，子元素可以通过设置visibility: visibile来取消隐藏。这种方式会使得超出的元素隐藏，对行内元素无效，必须是块级元素，隐藏之后元素依然占据着位置。● opacity: 0，会被子元素继承，并且子元素无法通过opacity:1来取消隐藏。● visibility: hidden，元素被隐藏，但是会被渲染，依然占据空间；● opacity: 0，本质是设置透明度为0，元素隐藏，依然占据空间。方式二. visibility:hidden。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值