frontend interview - css

display 和 visibility 的区别

1. 占用位置的区别:

   • display:none; 不占位置
   • visibility:hidden 占位置

2. 原理

   • 都会产生重绘,但是 display:none 还会产生依次回流. 产生回流一定会造成重绘,重绘不一定造成回流.

3. 什么是重绘?

   元素的结构(宽高,布局,显示隐藏,内部文字大小)未发生改变,只是元素的外观样式发生改变 比如背景颜色,内部文字颜色边框颜色等,此时会引起浏览器重绘,显然重绘的速度快于回流. 4.什么是回流? 当渲染树中的元素的宽高,布局显示,隐藏或元素内部文字结构发生改变时,会影响自身及其父元素 甚至追溯到更多的祖先元素发生改变,则会导致元素内部,周围甚至整个页面的重新渲染,页面发生重构, 回流就产生了