css1：层叠的概念 css2：关注点分离 css3：模块化的规范集合

01 基础知识

casading规则、选择器、继承、值和单位、盒模型

（1）层叠（cascading）、优先级

层叠：解决冲突的一个规则

is（）、not（）、has（）本身不计入优先级，以参数中最高的优先级为准，where（）优先级为0

源码位置：谁最后声明谁生效 要以声明顺序为基准，而不是引用顺序

• 使用id不利用复用

（2）继承

• 大部分具有继承特性的属性和文本相关
• inherit对有继承属性的特性进行显式指定
• 结果是24px

（3）css的值和单位

（4）盒模型

• 视觉格式化模型
• 盒模型是视觉格式化模型的基础

• 实现固定比例矩形：padding、百分比、aspect-ratio
• 实现渐变边框：background-clip、background-origin有padding-box和border-box，border-box包含，padding-box不包含

margin负值最终减少的是外界可以感知的宽高

02 布局和定位

常规流、弹性盒子、Grid、定位

（1）常规流布局

包含块级格式化上下文和内联格式化上下文

这块内联没有块级元素包裹的话：css会生成匿名的块盒子，选择不到，这个匿名的块盒子参与到bfc中

（2）块级格式化上下文

• 垂直方向有

（3）内联级格式化上下文

（4）弹性盒子布局

• 一维布局，可以指定两个控制方向

（5）grid

（66）定位

• sticky：基于它最近滚动祖先的视口定位

03 层叠上下文(The Stacking Context)

层叠顺序---排序规则，对层叠水平进行排序，每个元素都有层叠水平，简单理解就是元素在层叠上下文的具体顺序

z-index为0和auto是有区别的，0为创建了新的层叠上下文，那子的都没有办法超越父的

04 变形、过渡、动画

（1）transform变形

（2）transition过渡

阶跃可以用在逐帧动画上

逐帧动画：有一个长图，然后一跳一跳的去改变长图的位置

（3）animation动画

（4）性能相关

05 响应式设计

响应式设计原则、媒体查询、相对长度、绝对长度和视口

（1）响应式设计推荐遵循的原则

（2）媒体查询

媒体查询应该作为流式布局最后没有办法解决问题的时候去使用

（3）设备像素、参考像素和移动设备视口

手机上的物理像素更小，也会更密

css像素（参考像素）的目的：希望在不同设备上有相似的阅读体验

1个参考像素不会永远等于1个设备像素

（4）相对长度

06 CSS生态相关

• 语言增强：预处理器、后处理器
• 工程架构：css模块化、css-in-js、atomic css

（1）语言增强

领域特定语言

less相对来讲上手比较容易

（2）工程架构