前端面试宝典 每日一题（9）解释一下css重绘、重排以及两者的主要区别？

🧑🏻‍写在前面的话：
这个系列文章可能开始，有人会觉得很low， 我是打算从H5先开始整理，最后到常见的前端框架、以及一些前端常见的算法、leetcode的一些算法解析， 感兴趣的小伙伴可以持续关注，每天分享一个前端知识点，希望大家一起进步。

🧑🏻‍这是css方面的第二篇文章，这篇文章中的知识点会比较基础，所以会给大家解析三个知识点，希望对发刚开始学习前端的小伙伴能够有所帮助。

1.CSS哪些属性可以继承？

可继承的属性：

• font-size
• font-family
• color

不可继承的样式：

• border
• padding
• margin
• width
• height

2.display:none与visibility：hidden的区别？

• display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）
• visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）

重绘和重排时前端面试中比较的重要的一个知识点，也是比较有发散性的一个知识，每个同学可能在说到这个知识点的时候都会根据自身的知识储量来进行相应的发散，
所以也是能看出前端功力的一道题目，下面是我个人的一些观点，供大家参考。

3.解释一下css重绘、重排以及两者的主要区别？

• 重绘

一个元素外观的改变所触发的浏览器行为（例如改变visibility，outline，background等属性），浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。

• 重排

顾名思义就是重新排列，意味着重新计算文档中元素的位置和几何信息（元素的位置、大小），会影响部分或整个页面的布局。元素的重排将导致DOM中所有子元素和其他兄弟元素重新排列。

• 常见的触发重排和重绘的操作

1. DOM元素的几何属性变化

2. DOM树的结构变化（例如节点的增减、移动）

3. 获取某些属性（例如offsetTop，offsetLeft，offsetHeight，offsetWidth，clientWidth，clientHeight等）

4. 改变元素的一些样式（例如调整浏览器窗口大小）

5. 使用 display: none 隐藏元素会触发重排和重绘

6. 使用 visibility:hidden 只会引起重绘，因为没有布局和位置的变更

两者的区别：

重绘不会带来重新布局，并不一定伴随着重排，但是重排一定会触发重绘

在日常的开发中我们可以从以下的几个方面考虑尽量减少重排次数和缩小重排的影响范围：

1. 将多次改变样式属性的操作合并成一次操作
2. 将需要多次重排的元素，position属性设为absolute或fixed，使其脱离文档流，这样它的变化就不会影响到其他元素
3. 如果要对一个元素进行复杂的操作，可以将其display属性设置为none使其隐藏，待操作完成后再显示

🧑🏻‍这是关于css方面三个比较基础的知识点，希望这样的整理对大家学习前端基础能够有所帮助，期待大家一起进步。