什么是外边距重叠?css中可以让文字在垂直和水平方向上重叠的两个属性是什么?重排和重绘如何触发、如何避免、区别？ 居中为什么要使用 transform（为什么不使用 marginLeft/Top）？

什么是外边距重叠?

外边距重叠（margin-collapse）指的是当两个相邻的块级元素之间没有边框、内边距或者内容（空内容或者内容高度小于外边距高度）等障碍物阻隔时，它们之间的垂直外边距会发生重叠的现象。外边距重叠会使得两个相邻元素的上下外边距合并成一个外边距，并且这个合并后的外边距高度等于两个外边距中高度较大的那个。

在 CSS 中，外边距重叠的规则如下：在同一个 BFC（块级格式上下文） 中，两个相邻的块级元素会发生外边距重叠，其中 BFC 是一个独立的渲染区域，它的布局规则可以防止外边距重叠。需要注意的是，只有在垂直方向上的外边距才会重叠，而水平方向上的外边距不会产生重叠。

为了避免外边距重叠，在设计页面时可以尽量避免使用大量的空白元素，合理设置元素的边框、内边距和高度，或者采用其他方法间接避免外边距重叠的影响。

重叠的结果是什么?

折叠结果遵循下列计算规则:
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。

css中可以让文字在垂直和水平方向上重叠的两个属性是什么?

垂直方向：line-height，设置成比字体高度还小就可以让两行重叠。
水平方向：letter-spacing，设置负值可以让字母重叠。

如何触发重排和重绘？

重绘（repaint）是指元素样式的改变导致浏览器重新绘制元素，视觉上的更新。重新绘制已有元素，不影响布局。

回流（reflow 也称为重排）是指元素的尺寸、位置等属性的改变，页面布局的改变导致了元素的重新计算和重新排列。导致浏览器重新计算并布局整个文档。重新计算布局，会影响布局。

重绘和回流都是浏览器对页面进行渲染的过程。

触发重排和重绘的方式有：

• 添加、删除 DOM 、更新DOM节点、修改DOM结构
• 修改 DOM 元素的位置、尺寸
• 通过display: none 隐藏一个DOM节点——触发重排和重绘
• 通过visibility: hidden 隐藏一个DOM节点——只触发重绘，因为没有几何变化
• 修改 DOM 元素的内容，包括文本和图片等
• 修改 CSS 样式，包括添加、删除、修改一个样式属性（尺寸、位置或盒模型属性、颜色、背景等），调整样式属性
• 移动或者给页面中的DOM节点添加动画
• 用户行为，例如调整窗口大小，改变字号，或者滚动
• 改变浏览器窗口大小

总结：触发重绘的操作包括：颜色/图片变化等不影响布局的变化。触发回流的操作包括：内容变化、尺寸变化、隐藏显示等。这些操作可能需要重新计算布局。

重绘和回流 (重排) 是什么， 如何避免?

重绘和回流是浏览器对文档进行重新渲染的过程，这是非常消耗性能的操作，因此需要尽量避免频繁触发。

在 CSS 样式或文档结构发生改变时，会触发回流和重绘。重绘是指在屏幕上重新渲染元素，而回流则是重新计算元素的位置和大小。引起回流的原因有：添加或删除 DOM 元素、元素位置、尺寸或内容改变、浏览器页面初始化和窗口尺寸改变等。

为了避免过多的重排和重绘，可以采用以下方法：

1. 尽量减少 DOM 操作和样式变化的频率和强度。

2. 对于需要多次读取元素的尺寸或位置的情况，应该先缓存这些值，避免多次触发回流。

3. 尽量使用 CSS3 动画或过渡，而不是通过 JavaScript 直接修改样式。

4. 对于大量变化的元素，可以使用文档片段（Document Fragment）进行操作然后再统一插入到文档中，或者使用虚拟化技术，比如 Infinite Scrolling 等。

5. 使用 transform 属性来进行位移、旋转等变换，而不是使用 margin-left 和 margin-top 等属性。因为 transform 只会引起重绘，而不会触发回流。

6. 使用 cssText 或者 className 一次性改变属性，而不是通过多次单独设置样式，可以减少重排的次数。

7. 对于多次重排的元素，如动画，可以使用绝对定位脱离文档流，让它的改变不影响到其他元素，从而减少重排的次数。

以上就是避免重绘和回流的一些方法，可以通过这些措施优化网页并提升用户体验。

重绘与重排的区别？

重绘（repaint）指的是重新绘制元素的外观，而重排（reflow）指的是重新计算元素的尺寸和位置，并重新排列页面布局。

重绘只会更新元素的外观，而重排则会导致整个页面布局的重新计算和渲染。由于回流的成本较高，所以在性能优化中，应尽量减少回流的次数。

重绘是重新绘制元素,但不改变布局,比如修改颜色、图片等。重排是重新计算布局流,同时也会重绘,比如内容变化、尺寸变化会影响布局流。
重排比重绘消耗更多资源。

重排和重绘代价是高昂的，它们会破坏用户体验，并且让UI展示非常迟缓，而相比之下重排的性能影响更大，在两者无法避免的情况下，一般我们宁可选择代价更小的重绘。

【重绘】不一定会出现【重排】，【重排】必然会出现【重绘】。

居中为什么要使用 transform（为什么不使用 marginLeft/Top）

transform 属于合成属性（composite property），对合成属性进行 transition/animation 动画将会创建一个合成层（composite layer），这使得被动画元素在一个独立的层中进行动画。通常情况下，浏览器会将一个层的内容先绘制进一个位图中，然后再作为纹理（texture）上传到 GPU，只要该层的内容不发生改变，就没必要进行重绘（repaint），浏览器会通过重新复合（recomposite）来形成一个新的帧。

top/left属于布局属性，该属性的变化会导致重排（reflow/relayout），所谓重排即指对这些节点以及受这些节点影响的其它节点，进行CSS计算->布局->重绘过程，浏览器需要为整个层进行重绘并重新上传到 GPU，造成了极大的性能开销。

居中使用 transform 而不是 margin 是因为 transform 可以实现更流畅的动画效果，以及避免了 margin 对其他元素布局的影响。而 margin 的修改会触发元素的重排和重绘，也会影响到其他元素的布局。

居中时常使用transform属性，而不使用marginLeft和marginTop的原因是，transform可以利用硬件加速，性能更好。transform属性可以对元素进行平移、旋转、缩放等变换，而不会引起回流，因此在实现居中效果时更加高效。相比之下，使用marginLeft和marginTop会引起回流，性能较差。

使用marginLeft/Top只能实现水平或垂直居中，不能同时实现两者。

使用transform: translate()可以同时实现水平和垂直居中。

transform不影响正常流,margin会影响布局。

总结：外边距重叠是指相邻的两个元素垂直外边距发生重叠；CSS中可以让文字在垂直和水平方向上重叠的两个属性是text-align:center和line-height；重排是文档发生变化，浏览器重新计算元素的位置和大小，重绘是样式发生变化，浏览器重新绘制元素；要避免重排和重绘可以采用减少DOM 操作、使用虚拟化技术、使用 CSS3 动画代替 js 等；使用 transform 居中是为了避免 margin的影响，同时可以实现更流畅的动画效果。

持续学习总结记录中，回顾一下上面的内容：
什么是外边距重叠?重叠的结果是什么?css中可以让文字在垂直和水平方向上重叠的两个属性是什么?重排和重绘如何触发、如何避免、区别？ 居中为什么要使用 transform（为什么不使用 marginLeft/Top）？