最近失业，苦于之前的所有码农知识都是根据各种教程自学而来的，打算系统化学习一下。

CSS 学习大纲

基础部分

1. 引入CSS

• 内联样式
• 内部样式表
• 外部样式表

2. CSS选择器

• 元素选择器
• 类选择器
• ID选择器
• 属性选择器
• 伪类选择器
• 伪元素选择器

3. 盒模型

• 边框（border）
• 填充（padding）
• 边距（margin）

4. 文本属性

• 字体系列（font-family）
• 字体大小（font-size）
• 字体粗细（font-weight）
• 文字颜色（color）
• 行高（line-height）
• 文本对齐方式（text-align）
• 文本装饰（text-decoration）
• 文本转换（text-transform）

5. 背景

• 背景颜色（background-color）
• 背景图片（background-image）
• 背景重复（background-repeat）
• 背景位置（background-position）
• 背景附着（background-attachment）

中级部分

6. 定位

• 浮动（float）
• 清除浮动（clear）
• 定位模式（position）
  
  
  • 静态定位（static）
  • 相对定位（relative）
  • 绝对定位（absolute）
  • 固定定位（fixed）
• z-index

7. Flexbox布局

• 显示Flex容器（display: flex;）
• 主轴方向（flex-direction）
• 换行（flex-wrap）
• 对齐项目（justify-content, align-items, align-self）

8. Grid布局

• 创建Grid容器（display: grid;）
• 列模板（grid-template-columns）
• 行模板（grid-template-rows）
• 区域模板（grid-template-areas）
• 自动填充（auto-fill）
• 自动适应（auto-fit）
• 网格间距（gap）

9. 过渡与动画

• 过渡效果（transition）
• 关键帧动画（@keyframes）
• 动画属性（animation）

10. 响应式设计

• 媒体查询（media queries）
• 视口单位（vw, vh, vmin, vmax）
• 图片响应式（max-width: 100%; height: auto;）

高级部分

11. 变量

• CSS变量（--variable-name）

12. 样式继承

• 了解哪些属性会继承

13. 特殊选择器

• 后代选择器
• 子选择器（>）
• 相邻兄弟选择器（+）
• 通用兄弟选择器（~）

14. 高级布局技术

• 多列布局（column-count, column-gap）
• 形状外边距（shape-outside）
• 分区布局（container-type, container-name）

15. 性能优化

• 减少重绘和回流
• 使用合适的单位
• 最小化样式的使用