search

minjs1cn / weekly-learning

每周学习分享打卡
0 stars 0 forks source link

【经典面试】display:none 与 visibility:hidden 的区别是什么？ #51

Open xieshiyi opened 3 years ago

xieshiyi commented 3 years ago

https://zhuanlan.zhihu.com/p/37221519

xieshiyi commented 3 years ago

display : none 隐藏对应的元素，在文档布局中不再分配空间（回流+重绘） visibility:hideen 隐藏对应的元素，在文档布局中仍保留原来的空间（重绘） 使用 CSS display:none 属性后，HTML 元素（对象）的宽度、高度等各种属性值都将“丢失”;而使用 visibility:hidden 属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。

wucuiping commented 2 years ago

初始化display : none的元素，如果有图片资源，不会请求；vue中的v-show跟display : none的情况一致； 初始化visibility:hideen的元素，如果有图片资源，会请求；