1、基础知识

• 层叠(Cascading)、优先级

  
  
  
  

  • 由层叠概念引申出的css代码good practice

    • 选择器尽量少用id

    • 尽量不要用！ important

    • 自己的样式加载在引用库样式的后面

• 继承

• CSS的值和单位

• 盒模型

• 盒模型-负外边距

2、布局与定位

• 概述

• 常规流布局

• 块级格式化上下文(block formatting context)

• 外边距塌陷

• 内联级格式化上下文

• 弹性盒子布局

• 网格布局

• 使用Grid布局的示例

• Grid和Flex布局的使用策略

• 定位Position

3、层叠上下文(The Stacking Context)

• 层叠上下文

4、变形、过渡、动画

• transform变形

• transform变形3D

• transition过渡

• animation动画

• transform、transition、animation---性能相关

5、响应式设计

• 响应式设计推荐遵循的原则

  • 优先选用流式布局、如百分比、flex、grid等

  • 使用响应式图片、匹配尺寸、节省带宽

  • 使用媒体查询为不同的设备类型做适配

  • 给用设备设置简单、统一的视口

  • 使用相对长度，em、rem、vw作为长度度量

• 媒体查询

• 设备像素、参考像素和移动设备视口

  • 设备像素

    

  • DPI&&PPI

    

  • CSS像素

    

  • DPR设备像素比

    

  • 移动端的viewport

    
    

• 相对长度的使用

  • em

    

  • rem

    

  • vw和vh

    

6、CSS生态相关

• 语言增强：预处理器、后处理器

  • CSS预处理器

    
    
    
    
    
    
    

  • 广义CSS预处理器

    

  • CSS后处理器

    

  • postcss机制浅析

    

• 工程架构：CSS模块化、CSS-In-Js、Atomic CSS

  • CSS模块化

    

  • CSS-In-Js

    

  • styled-component机制浅析

    

  • CSS-In-Js pros&cons

    

  • 原子化CSS