0 CSS发展史
1 基础知识 1.1 层叠，优先级 层叠三大规则：样式表来源，选择器优先级，码源位置（优先级依次递减） 样式表来源优先级：
选择器类型：
选择器优先级： 内联(不属于选择器)>id>class=attribute=pseudo-class>type=pseudo-element
源码选择器（总之就是看代码的先后）： 1.对于@import的样式，根据@import的顺序 2.对于link和style标签的样式，根据在document中的顺序决定 建议：1.选择器尽量少用id（不利于css的复用，而且选择器优先级较高，影响后序覆盖） 2.尽量不要用！important（级别最高，扩展和灵活被压缩） 3.自己的样式加载在引用库样式的后面
1.2继承
1.3 css的值和单位 值可划分为：
单位可划分为：
1.4 盒模型 盒模型是视觉格式化模型的基础 基于盒模型可以控制如图所示内容：
由盒模型实现一些展示形式如下图所示：
关于盒模型的负外边距： padding,border,margin中，只有margin可以设置负值，margin的负值最终减少的是外界可感知的高度，margin不推荐频繁使用，会导致代码可读和复杂度提高，可以局部使用
2 布局
2.1 常规流布局 常规流布局包括块级格式化上下文和内联格式化上下文 块级格式化上下文：块级元素默认占满一行，排序方式从上到下（BFC：内部形成了一个新的块级格式化上下文，它就是这个块级格式化上下文的根元素） 内联格式化上下文：默认从左到右排列（line box的高度是元素的顶到元素的底之间的距离，line-height垂直居中）
关于内联级格式化上下文的例子：
2.2 外边距塌陷
2.3 弹性布局（Flex布局） 弹性盒子的相关属性分为两类：
作用在父元素上是对父元素内部，所有父元素排列规则，作用在子元素上，是只针对当前这个子元素的大小，位置和显示顺序
2.4 网格布局 Grid布局，由行和列组成的二维布局
2.5 布局总结
Grid布局在大面积或整体布局中推荐使用，在小面积，组件或Grid Item中使用Flex做灵活布局
2.6 定位
3 层叠上下文 新的层叠上下文渲染时与浏览器渲染时的render layer是一一对应的 形成层叠上下文的方式：
层叠上下文元素间的顺序：
4 transfrom
4.1 transition
4.2 animation
4.3 性能相关
5 响应式设计 响应式设计遵循的原则：
5.1媒体查询
5.2 设备像素（物理像素） 设备像素与本身硬件相关，屏幕出厂后固定不变 DPI与PPI：
5.3 css像素
参考像素永远不会等于物理像素
DPR像素比：
5.4 移动端的viewport 关于布局视口：
移动端的meta标签中的属性（在pc上不存在）： width:宽 height：高 initial-scale：初始放缩系数 minimum-scale:允许用户最小放缩系数 maximum-scale:允许用户最大放缩系数 user-scalable:是否允许用户放缩
常用移动端设置：
5.5 相对长度使用
em:若在font-size上使用1.5会不断放大，不断乘1.5；0.5会不断缩小，不断乘0.5
rem:
vw和vh: vw:相对于屏幕的宽度;vh:相对于屏幕的高度
6 css生态相关 6.1 语言增强——css预处理器
6.2 语言增强——css后处理器
主要的后处理框架是postcss postcss机制：
6.3 工程架构——css模块化
6.4 工程架构——CSS-in-JS css-in-js:将应用的css样式写在JavaScript文件里，利用js动态生成css
目前已经抛弃1。
6.5 工程架构——styled-component机制
6.6 工程架构——CSS-in-JS pros.和cons.
6.7 工程架构——原子化CSS
Tailwind: 1.使用工具库优先 2.按需生成 3.支持配置样式规则和自定义插件
原子化css的优缺点：
