比较 opacity: 0、visibility: hidden、display: none 优劣和区别

最新推荐文章于 2023-02-11 21:18:39 发布
最新推荐文章于 2023-02-11 21:18:39 发布
阅读量513 收藏
点赞数 1
分类专栏： 日常总结 文章标签： web前端 web性能优化 透明度和隐藏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45290438/article/details/102513659
版权

结构上：

  • display:none 会从渲染树中消失，元素不占据空间且无法点击；
  • visibility: hidden 不会从渲染树中消失，元素继续占据空间但无法点击；
  • opacity: 0 不会从渲染树消失，元素占据空间且可点击。

继承性：

  • display: none 和 opacity: 0 是非继承属性；父元素设置了 display:none 或 opacity: 0，子元素无论怎么设置都无法显示；
  • visibility: hidden 会被子元素继承，并且子元素可以通过设置设置 visibility: visible; 来取消隐藏。

性能：

  • display: none 会引起重排，性能消耗较大；
  • visibility: hidden 会引起重绘，性能消耗相对较小；
  • opacity: 0 会重建图层，性能较高
三千落雪掩赤壁
关注
专栏目录
分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景
liuhao9999的博客
03-22 353
结构：display:none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击， visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击 opacity: 0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击 继承：display: none：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。visibility: hidden：是继承属性，子孙节点消失由于继承了hidden，
前端面试宝典【CSS篇】【1】
最新发布
BDawn的专栏
07-28 42
分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景。 在CSS（层叠样式表）中，浮动（float）是一种布局机制，允许元素在其容器内向左或向右移动，同时允许其他内容围绕它流动。 清除浮动是Web开发中常见的需求，特别是在使用CSS布局时，以确保父元素能够正确包裹其浮动的子元素。
测试css3的动画效果在display:none的时候不耗费性能
weixin_34397291的博客
06-26 367
也许你也有这个疑惑，动画一直在播放，那它不显示出来的时候也一直在播放的话，那是否一直占用资源呢？ 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Test TS Serializer</title> ...
display：none，visibility：hidden，opacity：0 有什么异同
weixin_42317878的博客
11-27 385
相同点：使用元素在页面上都不可见； 1.
opacity animation性能注意事项
m0_53337932的博客
01-17 324
在animation中使用Opacity widget直接导致widget（可能还有它的子树）每一帧都rebuild，这效率很低。 建议改用 AnimatedOpacity 或 FadeTransition。
前端面试--CSS篇
The_upside_of_down的博客
09-07 1744
前端面试--CSS篇介绍下BFC及其应用怎样让一个div水平垂直居中？介绍下重流和重绘，以及如何进行优化？分别比较opacity：0，visibility：hidden，display：none的优劣和适用场景？简述CSS盒模型简述rem及其转换原理简述伪类和伪元素行内元素的margin和paddingCSS中那些属性可以继承？CSS3新增伪类有哪些？用CSS创建一个三角形min-width/max-width和min-height/max-height属性间的覆盖规则？ 介绍下BFC及其应用 BFC块级格
前端面试-CSS
wanglu458512的博客
09-19 2985
一、CSS基础 CSS选择器及其优先级 对于选择器的优先级： 标签选择器、伪元素选择器：1 类选择器、伪类选择器、属性选择器：10 id 选择器：100 内联样式：1000 注意事项： !important声明的样式的优先级最高； 如果优先级相同，则最后出现的样式生效； 继承得到的样式的优先级最低； 通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以它们的权值都为 0 ； 样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用
web前端基础入门学习教程之html中键入多个空格代码
前端基础入门学习线路
02-24 1330
如何让某个元素充满整个页面？ ​ 方法： html,body{height:100%;margin:0;} #test{height:100%;}如何让某个元素距离窗口上右下左4边各10像素？ 方法： html,body{height:100%;margin:0;} html{_padding:10px;} #test{position:absolute;top:10p...
本来只是想验证下display：none的元素是不是所占空间也消失，然后引生出一堆问题的思考。
牛爷爷的博客
11-03 4784
display：none；的验证结果是该元素所占空间消失，验证例子为：<!DOCTYPE html> <html> <head> <title>test</title> <style type="text/css"> div{ width:500px; height:500px; } .n
前端面试题：display:none;opacity:0;visibilty:hidden;区别与联系
weixin_45688725的博客
04-20 931
共同点：他们都会让元素隐藏； 区别： 结构 display:none会让元素完全从渲染树中消失，渲染时不再占据任何空间，不能点击； visibilty:hidden不会让元素从渲染树上消失，渲染元素继续占据空间，只是内容不可见，不能点击； opacity:0不会让元素在渲染树中消失，渲染元素继续占据空间，只是内容不可见，可以点击； 继承 display:none和opacity:0：是非继承...
Csss属性display，visibility区别，对渲染页面的影响
星下云的博客
02-11 1022
display，visibility
opacity:0; visibility:hidden; display:none;
weixin_30408739的博客
07-31 147
如果祖先元素遭遇某祸害，则其子孙孙无一例外也要遭殃，比如：opacity:0和display:none，若父节点元素应用了opacity:0和display:none，无论其子孙元素如何挣扎都不会再出现在大众视野；而若父节点元素应用visibility:hidden，子孙元素应用visibility:visible，那么其就会毫无意外的显现出来。 结构：display:none:...
【CSS】display:none、opacity:0、visibility:hidden 之间的区别
Superman_H的博客
03-05 383
display:none、opacity:0、visibility:hidden [结构]、[继承]、[性能] 的比较
display: none；和 visibility：hidden；有什么区别
6块腹肌的博客
08-03 498
一、它们的相同点： 都可以隐藏一个元素。 二、不同点： display：none；不会占用文档流位置； visibility：hidden；占用文档流位置； 三、性能： 从性能上来说，display：none；会更加消耗性能，因为当你从none和其它状态来回切换的时候，实际上是需要引擎去解析，然后还会影响到文档流的排列，这样会导致页面回流。 而visibility则不存在...
比较opacity:0、visibility:hidden、display:none，优劣和适用场景
Menqq的博客
03-16 1211
display: none DOM 结构：浏览器不会渲染 display 属性为 none 的元素，会让元素完全从渲染树中消失，渲染的时候不占据任何空间； 事件监听：无法进行 DOM 事件监听，不能点击； 性能：修改元素会造成文档回流（reflow 与 repaint）,读屏器不会读取display: none元素内容，性能消耗较大； 继承：是非继承属性，由于元素从渲染树消失，造成子孙节点消失，即使修改子孙节点属性子孙节点也无法显示，毕竟子类也不会被渲染； 场景：显示出原来这里不存在的结构； tran..
display：none、visiblity: hidden、opacity: 0区别
weixin_44941889的博客
11-10 1143
display：none、visiblity: hidden、opacity: 0均是用来隐藏元素的。 1、display: none。 DOM结构：被设置了display:none的元素浏览器不会渲染该元素在页面中，也根本不会占据位置； 事件：无法进行事件监听，点击事件没有生效； 性能：通过js无法获取到该元素身上的一些属性，并且通过动态的改变的display属性，会让页面反复渲染，引起页面重排，性能较差; 继承：不会被子类继承，因为自己没被渲染; transition: 不支持; 如图：
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、付费专栏及课程。

余额充值