什么是回流
当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流,就是在页面第一次加载的时候,这时候是一定会发生回流的,因为要构建render tree。在回流的时候,浏览器会使渲染树中受到影响的部分失效,并重新构造这部分渲染树,完成回流后,浏览器会重新绘制受影响的部分到屏幕中,该过程成为重绘。
什么是重绘
当render tree中的一些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不会影响布局的,比如background-color。则就叫称为重绘。
区别:
他们的区别很大:
回流必将引起重绘,而重绘不一定会引起回流。比如:只有颜色改变的时候就只会发生重绘而不会引起回流
当页面布局和几何属性改变时就需要回流
比如:添加或者删除可见的DOM元素,元素位置改变,元素尺寸改变——边距、填充、边框、宽度和高度,内容改变
链接:https://www.jianshu.com/p/e081f9aa03fb
来源:简书
一、空间占据
display:none隐藏后不占据额外空间,它会产生回流和重绘,而visibility:hidden和opacity:0元素虽然隐藏了,但它们仍然占据着空间,它们俩只会引起页面重绘。
二、子元素继承
display:none不会被子元素继承,但是父元素都不在了,子元素自然也就不会显示了,皮之不存,毛之安附~~
visibility:hidden 会被子元素继承,可以通过设置子元素visibility:visible 使子元素显示出来
opacity: 0 也会被子元素继承,但是不能通过设置子元素opacity: 0使其重新显示
三、事件绑定
display:none 的元素都已经不再页面存在了,因此肯定也无法触发它上面绑定的事件;
visibility:hidden 元素上绑定的事件也无法触发;
opacity: 0元素上面绑定的事件是可以触发的。
四、过渡动画
transition对于display肯定是无效的,大家应该都知道;
transition对于visibility也是无效的;
transition对于opacity是有效,大家也是知道的:).
————————————————
原文链接:https://blog.csdn.net/github_39673115/java/article/details/77926351
display:none;visibility:hidden;opacity:0;之间的区别的更多相关文章
-
深入理解 '0' ";0"; '\0' 0 之间的区别
看来基础还是很重要的,基础不扎实就难以学好c语言,就别说写出高质量的c语言代码了.今天,我就被这个问题折磨的不行了,哈哈,不过现在终于明白了‘\0’ ,‘0’, “0” 之间的区别了.困惑和快乐与你分 ...
-
深入理解c语言——‘\0’ ,‘0’, “0” ,0之间的区别
看来基础还是很重要的,基础不扎实就难以学好c语言,就别说写出高质量的c语言代码了.今天,我就被这个问题折磨的不行了,哈哈,不过现在终于明白了‘\0’ ,‘0’, “0” 之间的区别了.困惑和快乐与你分 ...
-
css隐藏元素display:none,opacity:0;filter:alpha(opacity=0-100;,visibility:hidden的区别
在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.我们一般有三种方式:display:none, opacity:0;fil ...
-
CSS隐藏元素 display、visibility、opacity的区别
关于使指定元素无法在视野内看到,有3个方法 display: none; opacity: 0; visibility: hidden; 1.display: none; 该方法会改变页面布局. 元素 ...
-
基础总结(04)-- display:none;&;&;visibility:hidden;区别
display:none 1.使元素隐藏,不再占据空间. 2.动态操作时会引起页面回流和重绘,影响性能. 3.子元素也会被隐藏并且添加display:block/visibility:visible无 ...
-
hidden=";hidden";,display:none, visibility:hidden 三者的区别
三者都可以实现隐藏元素的效果 1:display:none 就是把元素隐藏,即在页面上看不到这个元素,并且不占据任何位置 2:hidden="hidden"在页面展示出来效果跟di ...
-
display:none和visibility:hidden v-show和v-if的区别
隐藏元素display:none 和 visibility:hidden的区别visibility:hidden可以隐藏某个元素,但是隐藏的元素仍要占据空间,仍要影响布局display:none不会占 ...
-
Android:finish()与System.exit(0)之间的区别
finish()与System.exit(0)都是用来退出.但是两者还是有一定的区别: finish是Activity的类,仅仅针对Activity,当调用finish()时,只是将活动推向后台,并没 ...
-
c语言‘\0’ ,‘0’, “0” ,0之间的区别
首先比较一下‘\0’和‘0’的区别.有一个共同点就是它们都是字符,在c语言中,字符是按其所对应的ASCII码来存储的,一个字符占一个字节.请翻开你的ASCII字符集表吧,一般在你的C语言教材的附录上, ...
随机推荐
-
Centos7 and docker practices
1. Failed to get D-Bus connection: Operation not permitted error when you execute the systemctl star ...
-
PHP zendframework phpunit 深入
安装包管理 curl -sS https://getcomposer.org/installer | /usr/local/php/bin/php 将证书安装到 ~$ mkdir ~/tools/ht ...
-
纯JS文本在线HTML编辑器KindEditor
KindEditor(http://www.kindsoft.net)是一款比较专业,主流,好用的在线HTML编辑器. 它除了可以将文本进行编辑.将Word中的内容复制进来外,本身还可以拖动缩放(右下 ...
-
UAT测试,PPT测试
UAT:user acceptable testing 用户验收测试 PPT:product produce test 产品生产验证
-
JAVA FILE or I/O学习 - I/O流操作:FileInputStream、FileOutputStream、ObjectInputStream、ObjectOutputStream、InputStreamReader、OutputStreamWriter等
public class IOStreamKnow { /*********************************文件读写方式:字节流**************************** ...
-
风起看云涌,叶落品人生 - Google 搜索
风起看云涌,叶落品人生 - Google 搜索 风起看云涌,叶落品人生
-
扩展BootstrapTable的treegrid功能
扩展BootstrapTable的treegrid功能 阅读目录 一.效果预览 二.代码示例 三.组件需要完善的地方 四.总结 正文 前言:上篇 JS组件系列——自己动手封装bootstrap-tr ...
-
Lighthouse前端性能优化测试工具
在前端开发中,对于自己开发的app或者web page性能的好坏,一直是让前端开发很在意的话题.我们需要专业的网站测试工具,让我们知道自己的网页还有哪些需要更为优化的方面,我自己尝试了一款工具:Lig ...
-
OCIEnvCreate 失败,返回代码为 -1的解决方法
错误描述 连接Oracle始终报这个错误: {System.Exception: OCIEnvCreate 失败,返回代码为 -1,但错误消息文本不可用 本机环境是oracle10g客户端,以前也连过 ...
-
【C/C++】计时函数比较
目前,存在着各种计时函数,一般的处理都是先调用计时函数,记下当前时间tstart,然后处理一段程序,再调用计时函数,记下处理后的时间tend,再tend和tstart做差,就可以得到程序的执行时间,但 ...