05. CSS

实现响应式布局

响应式：页面根据用户设备环境（系统平台、屏幕尺寸、屏幕定向等）自动进行相应的响应和调整实现：

弹性布局（flex、grid）
媒体查询
相对单位（rem、百分比、vw/vh）

隐藏页面元素

display: none
visibility: hidden
opacity: 0
position: 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% 就可以完美显示了。

line-height 的百分比相对于什么

自身的字体大小

两列布局

flex

.container {
  display: flex;
}
 
.left {
  flex: 1; /* 左列自适应剩余空间 */
}
 
.right {
  flex: 0 0 300px; /* 右列固定宽度 */
}

grid

.container {
  display: grid;
  grid-template-columns: 1fr 300px; /* 左列自适应，右列固定300px */
  gap: 20px;
}

浮动

.left {
  float: left;
  width: calc(100% - 320px); /* 总宽度减去右列+间隙 */
}
 
.right {
  float: right;
  width: 300px;
}
 
/* 清除浮动 */
.container::after {
  content: '';
  display: block;
  clear: both;
}

0.5px 的线

transform: scaleY(0.5)

CSS 中哪些属性能触发硬件（GPU）加速

transform 的 3D 转换
opacity
filter
will-change

原理：对页面上的元素进行某些操作时，该元素会被移动到属于它自己的“图层”，在那里它可以独立于页面的其他部分内容进行渲染，并在之后被合成（画到屏幕上）

太过依赖硬件加速也会有问题：会创建过多的图层，占用过多内存，影响性能

requestAnimationFrame

专门用来为动画设计的 API，发生的时机是在下次页面重绘之前，与 setTimeout 相比有如下优势：

根据不同屏幕的刷新频率，自动调整执行回调函数的时机
当窗口处于未激活状态时，requestAnimationFrame 会停止执行，而 setTimeout 不会
自带函数节流功能

setTimeout、requestAnimationFrame 和 requestIdleCallback

特性	`setTimeout`	`requestAnimationFrame`	`requestIdleCallback`
执行时机	设定时间后执行（不保证准时）	下一帧渲染前（16.6ms 以内）	浏览器空闲时（可能延迟执行）
主要用途	延迟执行代码	动画和流畅渲染	低优先级任务（如日志、分析）
帧率控制	无，可能丢帧	跟随屏幕刷新率（一般 60FPS）	不受限制，完全取决于浏览器
影响页面性能	可能影响页面流畅度	保证流畅动画	不会阻塞主线程
是否适用于动画	❌ 可能卡顿	✅ 适合	❌ 不适合
是否受 CPU 影响	✅ 受影响	✅ 受影响	✅ 受影响
适用场景	定时任务、轮询	动画、过渡、流畅 UI 渲染	后台任务、低优先级执行（如数据同步、日志收集）

🏡 Hayoee

探索