09
2020
04

display:none与visibility:hidden的区别?

display:none 不显示对应的元素,在文档布局中不再分配空间(回流+重绘)

visibility:hidden 隐藏对应元素,在文档布局中仍保留原来的空间(重绘)

重绘:当render-tree中的一些元素需要更新属性,而这些属性只影响元素的外观、风格,而不影响布局,比如是background-color,则就称为重绘。


回流:当页面中的布局和几何属性改变时就需要回流,比如是:


<1>、添加或删除可见的DOM元素


<2>、元素位置的改变


<3>、元素尺寸的改变(边框、尺寸、填充、宽度、高度)


<4>、内容的改变(比如文本的改变和图片大小的改变而引起的计算值宽度和高度的改变)


<5>、页面渲染初始化


<6>、浏览器窗口尺寸的改变-resize事件发生时


回流必将引起重绘,重绘不一定会引起回流

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。