CSS 基础

使用 CSS 隐藏页面元素的方法有哪些？有什么区别？

方法	描述	触发重排	触发重绘	影响鼠标事件
display: none	完全从文档流中移除元素，不占空间。	是	是	是
visibility: hidden	元素仍占据空间，只是看不见。不会阻止通过代码触发的事件，但阻止鼠标事件。	否	是	是
transform: scale(0)	使用变换将元素缩放到0，从视觉上完全隐藏，但仍占据原来的空间。可能仍可通过代码触发事件。	否	是	是
opacity: 0	元素完全透明，但仍然占据空间和可交互。用户可以通过鼠标或键盘触发事件。	否	是	否

其中除了 display: none 是直接移出元素外，其他方式影响鼠标事件是由于元素无法获得焦点。

简述 CSS 中的重绘和重排

特性	Repaint (重绘)	Reflow (重排)
定义	元素的外观改变，但不影响其布局。	元素的布局或尺寸发生变化，可能会影响周围元素的布局。
触发条件	更改颜色、背景色、可见性、边框样式等不影响布局的属性。	更改尺寸、位置、显示（display）、边框厚度、内容变化（如文本改变或图片加载）等影响布局的属性。
性能影响	相对较低，因为只需要重新绘制元素，不需要重新计算布局。	性能影响较大，因为需要重新计算元素的位置和尺寸，可能会连锁影响其他元素的布局。
性能优化	使用合成层（例如通过 will-change、transform）隔离频繁重绘的元素。	最小化 DOM 操作，合并多次样式修改，利用 CSS3 属性如 transform 进行动画，避免触发重排。