课程重点
- 基础知识
- 布局和定位
- 层叠上下文
- 变形、过渡、动画
- 响应式设计
- CSS生态相关
课程内容
基础部分
层叠、优先级
层叠有三大规则，它们的优先程度是依次递减的。
- 样式表来源
如果添加了important的关键字就要反过来。
- 选择器优先级
那么选择器的优先级是：
即：内联 > ID选择器 > 类选择器 > 标签选择器, 权重相同的情况下以后面出现的选择器为最后规则
内联样式不属于选择器，只是为了方便记忆，放在这里做对比。
可以 将A、B、C、D分别代表内联、ID选择器、类选择器、标签选择器
以下题为例：求在以下代码中，文案TEXT的颜色最终是什么。依题：
yellow和red：均出现了一次标签选择器和一次内联，可记为A:0 B:0 C:1 D:1
blue和green均只出现一次标签选择器，均记为 0 0 0 1
依次对照下来AB级同，而yellow、red的C项均大于其余颜色，虽然yellow和red两个权重相同，但是red在后面出现，所以最后颜色是red。 - 源码位置
那么通过层叠概念，我们收获了一些书写CSS代码的好实践：
- 选择器尽量少用id（优先级比较高，不利于后面的覆盖）
- 尽量不用用！important
- 自己的样式加载在引用库样式的后面
继承
CSS的值和单位
盒模型
由盒模型的特性实现一些展示形式？
负外边距
padding、border、margin中，只有margin可以设置负值
布局
常规流布局
块级格式化上下文BFC(面试会问)
外边距塌陷
内联级格式化上下文
常见的使用示例：
弹性盒子布局
弹性盒子的相关属性分为两类：
- 作用于父级：
- 作用于子元素：
示例：
- 展示灵活的文件长度省略展示
- 展示骰子上的六个面：
网格布局
使用Grid布局来展示骰子的面
Grid和Flex布局的使用策略
Flex：
- 一维布局
- 基于内容
- 浏览器兼容性更好
Grid：
- 二维布局
- 基于布局
- 2017年后浏览器的版本普遍支持
定位Position
为了我们可以在文档流的基础上，让元素移动，做出更多灵活的改变。当position属性的取值非static的时候，可以使用top、right、bottom、left对其进行定位
使用定位的例子（对话框）
有定位就会有覆盖的问题，这个时候就需要考虑层叠上下文
层叠上下文
层叠上下文是对HTML元素的三维构想，将元素沿着垂直屏幕的虚构的Z轴排开
形成新的层叠上下文的条件（任一即可）：
- position：relative或absolute；并且z-index不是auto
- position：fiexd或sticky
- flex或grid的子元素；并且z-index不是auto
- opacity的值小于1
- transform的值不为none
- will-change的值不为通用值
层叠顺序不仅指不同的层叠上下文的顺序，同一个层叠上下文内，元素间也有顺序：
编写z-index的建议：
- 使用CSS变量或者预处理语言的变量，管理z-index的值
- 将预设间隔设置10或100，方便后续的插入
变形、过度、动画
transform变形
3D运用到上述骰子的例子里可以把骰子以3D的形式展现。
transition过渡
animation动画
相较于过渡，动画可以实现更多更丰富的动画效果。
在使用动画的过程中，会出现一些性能相关的问题。
如何写动画性能更好？
- 尽量不用触发reflow的属性
- 在遇到性能问题时可以触发硬件加速，比如设置will-change属性、设置transform3d等
- 尽量使用transform和opacity去写动画
响应式设计
推荐遵循的原则：
媒体查询
媒体查询允许某些样式只在页面满足特定条件时才生效。我们可以将媒体类型（如：screen、print）以及媒体特性（如：视口宽度、屏幕比例、设备方向：横向或纵向）做为约束条件。
设备像素、参考像素和移动设备视口
设备像素
DPI&PPI
CSS像素
DPR设备像素比
移动端的viewport
相对长度的使用
em
rem
rem：根元素的字体大小。通过伪类:root或者html选择器选定。由于是根元素的font-size，所以不会像em那样出现多重嵌套问题。减少了复杂性，同时作为一个相对单位，可以进行适配放缩，可以用来做响应式布局。
vw和vh
vw：视窗宽度的1%。
vh：视窗高度的1%。
同样vw也可以作为响应式布局的基准单位。由于vw天然是视口宽度的1%，所以不需要js动态配置。
CSS生态相关
scss、less、stylus简单对比：
CSS后处理器
postcsss机制
工程架构——css模块化
styled-component机制
