02-布局相关 ⭐⭐
Flexbox、Grid、定位与变换
学习目标
- 掌握 Flexbox 弹性布局的核心用法
- 理解 Grid 网格布局的强大功能
- 学会 position 定位的各种场景
- 了解 transform 变换的应用
本章内容
| 文件 | 内容 | 难度 |
|---|---|---|
| 02-布局相关.md | Flexbox、Grid、定位、变换 | ⭐⭐ 进阶 |
学习建议
本章是 CSS 布局的核心，建议：
- 理解 Flexbox 和 Grid 的区别 - 一维 vs 二维布局
- 动手实验 - 用开发者工具实时调试布局属性
- 完成导航栏练习 - 验证 Flexbox 掌握程度
- 对比定位方式 - 理解不同定位的使用场景
检验标准
完成本章后，你应该能够：
- [ ] 使用 Flexbox 实现水平垂直居中
- [ ] 使用 Grid 实现响应式网格布局
- [ ] 区分 relative、absolute、fixed、sticky 的使用场景
- [ ] 用 transform 实现元素变换效果
- [ ] 解释为什么推荐用 transform 做动画