实现响应式布局
响应式：页面根据用户设备环境（系统平台、屏幕尺寸、屏幕定向等）自动进行相应的响应和调整 实现：
- 弹性布局（flex、grid）
- 媒体查询
- 相对单位（rem、百分比、vw/vh）
隐藏页面元素
display: nonevisibility: hiddenopacity: 0position: absolute移到显示范围外（不推荐）- 宽高改为 0（不推荐）
display: none | visibility: hidden | opacity: 0 | |
|---|---|---|---|
| 页面中 | 不存在 | 存在 | 存在 |
| 绑定事件 | 不触发 | 不触发 | 触发 |
| 回流 | 会 | 不会 | 不会 |
| 重绘 | 会 | 会 | 会（如果是 transition 时走独立合成层，不会重绘） |
视差滚动
多层背景以不同的速度移动，形成立体的运动效果
实现
background-attachment: fixed 让背景固定，不会随着元素的内容移动
padding-top/bottom 和 margin-top/bottom 的百分比相对于什么
相对于父元素的 width
原因：
我们认为，正常流中的大多数元素都会足够高以包含其后代元素（包括外边距），如果一个元素的上下外边距是父元素的 height 的百分数，就可能导致一个无限循环，父元素的 height 会增加，以适应后代元素上下外边距的增加，而相应的，上下外边距因为父元素 height 的增加也会增加，无限循环。
一个比较经典的应用场景：
移动端图片展示，盒子设高度为 0，宽度为 100%，padding-top 设置为 100%，这样这个盒子的高度始终会和盒子的宽度一样，之后里面的图片尺寸按照 1:1 设计，宽高都设置为 100% 就可以完美显示了。
实现固定宽高比
1.现代方法：aspect-ratio
.box {
aspect-ratio: 16/9;
}2.小技巧：padding-top
利用 padding 百分比相对于宽度的特性
.div {
position: relative;
width: 100%;
height: 0;
padding-top: 56.25%; /* 16:9 比例的默认值 */
.box {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}line-height 的百分比相对于什么
自身的字体大小
两列布局
flex
.container {
display: flex;
}
.left {
flex: 0 0 300px; /* 左列固定宽度 */
}
.right {
flex: 1; /* 右列自适应剩余空间 */
}grid
.container {
display: grid;
grid-template-columns: 300px 1fr; /* 左列固定300px，右列自适应 */
}浮动
.left {
float: left;
width: 300px;
}
.right {
float: right;
width: calc(100% - 300px); /* 总宽度减去左列 */
}
/* 清除浮动 */
.container {
display: flow-root;
}定位
.container {
position: relative;
width: 100%;
}
.left {
position: absolute;
width: 300px;
left: 0;
top: 0;
bottom: 0;
}
.right {
position: absolute;
left: 300px;
top: 0;
right: 0;
bottom: 0;
}0.5px 的线
transform: scaleY(0.5)
CSS 中哪些属性能触发硬件（GPU）加速
transform的 3D 转换opacityfilterwill-change
原理：对页面上的元素进行某些操作时，该元素会被移动到属于它自己的“图层”，在那里它可以独立于页面的其他部分内容进行渲染，并在之后被合成（画到屏幕上）
太过依赖硬件加速也会有问题：会创建过多的图层，占用过多内存，影响性能
requestAnimationFrame
专门用来为动画设计的 API，发生的时机是在下次页面重绘之前，与 setTimeout 相比有如下优势：
- 根据不同屏幕的刷新频率，自动调整执行回调函数的时机
- 当窗口处于未激活状态时，requestAnimationFrame 会停止执行，而 setTimeout 不会
- 自带函数节流功能
setTimeout、requestAnimationFrame 和 requestIdleCallback
| 特性 | setTimeout | requestAnimationFrame | requestIdleCallback |
|---|---|---|---|
| 执行时机 | 设定时间后执行（不保证准时） | 下一帧渲染前（16.6ms 以内） | 浏览器空闲时（可能延迟执行） |
| 主要用途 | 延迟执行代码 | 动画和流畅渲染 | 低优先级任务（如日志、分析） |
| 帧率控制 | 无，可能丢帧 | 跟随屏幕刷新率 | 不受限制，完全取决于浏览器 |
| 影响页面性能 | 可能影响页面流畅度 | 保证流畅动画 | 不会阻塞主线程 |
| 是否适用于动画 | ❌ 可能卡顿 | ✅ 适合 | ❌ 不适合 |
| 是否受 CPU 影响 | ✅ 受影响 | ✅ 受影响 | ✅ 受影响 |
| 适用场景 | 定时任务、轮询 | 动画、过渡、流畅 UI 渲染 | 后台任务、低优先级执行（如数据同步、日志收集） |