CSS 总结
CSS 知识体系回顾、学习路线、推荐资源
CSS 总结
恭喜完成 CSS 教程！回顾核心知识体系，规划接下来的学习路线。
学完本章你将： 回顾 CSS 知识体系、推荐学习路线和资源。
知识体系回顾
CSS 基础
├── 语法与选择器（基本/关系/属性/伪类/伪元素）
├── 颜色与单位（HEX/RGB/HSL, px/em/rem/vw/%）
└── 使用方式（外部/内部/内联）
视觉样式
├── 背景（颜色/图片/渐变/附着）
├── 边框（样式/圆角/轮廓）
├── 文本（对齐/装饰/转换/阴影/间距）
├── 字体（家族/大小/粗细/Google Fonts）
└── 阴影（box-shadow/text-shadow）
盒模型
├── margin/padding/width/height
├── box-sizing（content-box vs border-box）
└── display（block/inline/inline-block/none）
布局
├── 传统：float/position/clear
├── 现代：Flexbox（一维）/ Grid（二维）
├── 居中方案大全
└── 多列布局
响应式设计
├── viewport / 媒体查询 / 断点
├── 移动优先策略
├── 响应式图片/视频
└── clamp() 数学函数
动效
├── transition 过渡
├── @keyframes animation 动画
└── transform 2D/3D 变换
工程化
├── CSS 变量
├── BEM 命名规范
├── 文件组织
└── 性能优化下一步
| 方向 | 内容 |
|---|---|
| 🎨 **Sass/SCSS** | 变量、嵌套、mixin、函数 |
| 🧩 **Tailwind CSS** | 实用优先的原子化 CSS |
| 🚀 **Bootstrap** | 最流行的 CSS 框架 |
| 📱 **移动端适配** | rem/vw 布局、1px 问题 |
| 🎬 **CSS 进阶动画** | 复杂动效、性能优化 |