一、层叠上下文
层叠上下文是对HTML元素的三维构想，将元素沿着垂直屏幕的虚构的Z轴排开。
-
一个新的层叠上下文渲染时会对应一个浏览器渲染时的渲染层。
-
层叠顺序：不仅指不同的层叠上下文的顺序，同一个层叠上下文内，元素间也有顺序。 只在同一个层叠上下文内比较z-index，子元素的z-index不能超越父元素的z-index显示顺序。
-
编写z-index的建议： 1.使用css变量或者预处理语言的变量，管理z-index的值。 2.将预设间隔设置10或100，方便后续的插入。
二、变形、过渡、动画
- transform变形2D和3D相关属性
- transition过渡，通过指定某些元素属性从一种起始状态，在一段时间内以某种变化节奏，过渡到终止状态。
- animation动画中，关键帧定义动画中的关键样式，动画是由关键帧和浏览器插入的帧图像构成。介绍了为元素添加动画的相关属性。
动画的性能要考虑布局、绘制和合成这几个方面。宽、高、位置等改变都会重新布局；文本、着色、背景边框等改变会触发绘制，某些渲染层形成合成层，拥有单独的图层由GPU绘制，不受影响；合成时收集所有绘制完成的图层，按照顺序合成显示。
性能的优化：
- 尽量不用触发重新布局的属性。
- 在遇到性能问题时触发硬件加速，比如设置will-change属性、transform3d。
- 尽量使用transform和opacity去写动画。
三、响应式设计
推荐遵循的原则：
- 优先选用流式布局，如百分比、flex、grid
- 使用响应式图片，匹配尺寸，节省带宽
- 使用媒体查询为不同设备类型做适配
- 给移动端设备设置简单、统一的视口
- 使用相对长度，如em，rem，vw做为长度度量。
1.媒体查询： 允许某些样式只在页面满足特定条件时才生效，可以将媒体类型（如screen、print）以及媒体特性（视口宽度、屏幕比例、设备方向）作为约束条件。
遵循原则：
- 遵守层叠覆盖原则，min-和max-选择一个
- 设备多样化而不可枚举，断点选择尽量依据内容选择
- 断点的增加会增加样式处理的复杂度，尽量减少断点。
2.设备像素、参考像素和移动设备视口
设备像素（物理像素）：显示器上绘制的最小单位，显示屏通过控制每个像素点的颜色使屏幕显示不同的图像。与设备相关，屏幕出厂后它上面的物理像素点就固定不变。
DPI&&PPI：
- dpi：每英寸多少点。
- ppi：每英寸多少像素数。
当用于描述显示器设备时，ppi与dpi是同一个概念，都描述每英寸多少物理像素及显示器设备的点距。
CSS像素是一个视角单位，规范定义是，1css像素是从一臂之遥看解析度为96dpi的设备输出时，1点的视角。css像素是为了保证阅读体验一致，即对于不同的物理设备，css使得浏览器中1css像素的大小在不同物理设备上看上去大小差不多。是根据设备像素换算实现的，浏览器根据硬件设备能够直接获取css像素。
设备像素比(dpr)：描述未缩放状态下，设备像素和css像素的初始比例关系。
移动端视口： 布局视口是页面中html元素的包含块，默认情况下，window.document.documentElement.clientWidth就是视口的宽度，用标签设定视口来完成对移动端设备的适配。
CSS生态相关：
语言增强：预处理器、后处理器
工程架构化：CSS模块化、CSS-in-js、automic CSS
总结：介绍了一些CSS基础知识和实战技巧，一些知识点细节还需要多花时间记忆。
