实现响应式布局
响应式：页面根据用户设备环境（系统平台、屏幕尺寸、屏幕定向等）自动进行相应的响应和调整 实现：
- 弹性布局（flex、grid）
- 媒体查询
- 相对单位（rem、百分比、vw/vh）
隐藏页面元素
display: nonevisibility: hiddenopacity: 0position: absolute移到显示范围外（不推荐）- 宽高改为 0（不推荐）
display: none | visibility: hidden | opacity: 0 | |
|---|---|---|---|
| 页面中 | 不存在 | 存在 | 存在 |
| 绑定事件 | 不触发 | 不触发 | 触发 |
| 回流 | 会 | 不会 | 不会 |
| 重绘 | 会 | 会 | 如果是 transition 时走独立合成层，不会重绘 |
视差滚动
多层背景以不同的速度移动，形成立体的运动效果
实现
background-attachment: fixed 让背景固定，不会随着元素的内容移动
padding-top 和 margin-top 的百分比相对于什么
相对于父元素的 width
原因：我们认为，正常流中的大多数元素都会足够高以包含其后代元素（包括外边距），如果一个元素的上下外边距是父元素的 height 的百分数，就可能导致一个无限循环，父元素的 height 会增加，以适应后代元素上下外边距的增加，而相应的，上下外边距因为父元素 height 的增加也会增加，无限循环。
一个比较经典的应用场景：移动端图片展示，盒子设高度为 0，宽度为 100%，padding-top 设置为 100%，这样这个盒子的高度始终会和盒子的宽度一样，之后里面的图片尺寸按照 1:1 设计，宽高都设置为 100% 就可以完美显示了。