3. 层叠上下文
层叠上下文是对HTML元素的三维构想，将元素品着垂直屏幕的虛构的乙轴排开
形成新的层叠上下文的条件（任一即可）：
- position:relative 或absolute;并且 Z-index 不是auto
- position: fixed 或 sticky
- flex 或grid 的子元素；并且z-index 不是auto
- opactuy的值小等，
- transform 的值不为 none
- will-change 的值不为 通用值
层愛顺序不仅指不同的层愛上下文的顺序，同一个层登上下文内，元素间也有順序：
4. 变形，过渡，动画
transform 变形
2D 相关属性：
transform: translate(移动） rotate(旋转) scale(放缩) maux(委形矩阵)等心 tansform-origin right top. center等 表示变形时依据的原点 04_ transform 变形 30
3D 相关属性：
- transform: translated, rotated,scale3d、matrix3d等
- transform-origin: right top 、 50px 30px 等
- 表示变形时依据的原点transform-style：flat 或 preserve-3d 看子元素的3d表现
- perspective：观看点距离2=0这个平面的距离，可可以在ransform中用perspective0使用作用为当前元素，也可以直接使用，给后代元素一个统一值
- perspective-origin：观看青的位置，如top、bottom等
- backface-visibity： 元素正面只有朝向观察者的时候可见
transform变形3D
5. 响应式设计
-
响应式设计原则
-
媒体查询
媒体查询允许某些样式只在页面满足特定条件时才生效。我们可以将媒体类型（如 screen、 print）以及媒体特性（如视口宽度、屏幕比例、设备方向：横向或纵向）做为约束条件。
使用媒体查询的一些Tips
- 媒体查询同样遵循cascading层叠覆盖原则，min-和max-选择一个
- 由于设备的多样化逐渐不可枚半，断点的选择尽量根据内容选择
- 由于断点的增加会增加样式处理的复杂度，正所以尽量減少断点
-
相对长度
-
绝对长度和视口
-
css生态相关
