CSS的简要发展历史
- HTML提出
- CSS1：解决网页排版布局和装饰问题，第一个有“层叠(casading)”概念的语言
- CSS2：表现和内容分离
- CSS2.1：对CSS2的修正、扩展，代替CSS2
- CSS3：规范模块化发展，样式丰富、炫酷，提高网站的可维护性以及性能速度
01 基础知识
层叠三大规则
- 样式表来源：按来源进行优先度排序
- 选择器优先级：对于选择器类型进行分类
例如，内联>内部>外部 3. 源码位置：后面的源码会覆盖前面的样式
由层叠概念引申出css代码的good practice
- 选择器尽量少用id
- 尽量不要用!important
- 自己的样式加载在引用库样式后面
盒模型
margin + border + padding + content
02 布局和定位
布局
CSS3之前的常用布局：
- Normal Flow 常规流
- Float 浮动流
- Positioning 定位流
CSS3之后的新增布局：
- Flex弹性盒子布局
- Grid网格布局
- Muticol多列布局
外边距坍塌问题
对于一个父盒子里面包含一个子盒子的情况，子盒子有margin-top: 100px;
我们的想要的效果是让子盒子上边距父盒子100px，但是并没有出现我们预期的结果，而是父盒子距离其父盒子有了100px的上边距
解决方案：
给父元素加入display: flow-root;
或者让父元素成为BFC
Flex和Gird使用策略
Flex
- 一维布局
- 基于内容
- 浏览器兼容性更好
Grid
- 二维布局
- 基于布局
- 2017年后浏览器的版本普遍支持
使用：
- 大面积或整体布局，推荐使用Grid布局
- 小面积或组件中，或Grid Item中可以使用Flex做灵活布局
03 层叠上下文(The Stacking Context)
层叠优先级可以通过z-index改变，但注意，z-index只有在给定的position非static时生效
编写z-index的建议：
- 使用CSS变量或者预处理语言的变量，管理z-index的值
- 将预设间隔设置10或100，方便后续的插入
04 变形、过度、动画
如何写动画性能更好？
- 尽量不要触发reflow的属性
- 在遇到性能问题时可以触发硬件加速，比如设置will-change属性、设置transfrom3d等
- 尽量使用transform和opacity去写动画
05 响应式布局
响应式设计推荐遵循的原则
- 优先选用流式布局，如百分比，flex，grid等
- 使用响应式图片，匹配尺寸，节省带宽
- 使用媒体查询为不同的设备类型做适配
- 给移动端设备设置简单、统一的视口
- 使用相对长度：em，rem，vw作为长度度量
使用媒体查询的一些Tips
- 媒体查询同样遵循cascading层叠覆盖原则，min-和max-选择一个
- 由于设备的多样化逐渐不可枚举，断点的选择尽量根据内容选择
- 由于断点的增加会增加样式处理的复杂度，所以尽量减少断点
设备像素
设备像素（物理像素）：显示器上绘制的最小单位，显示屏通过控制每个像素点的颜色，使屏幕显示出不同的图像。设备像素和设备相关，屏幕从工厂出来的那天起，它上面的物理像素点就固定不变了。
设备像素、DPI、PPI、CSS像素、DPR设备像素比等概念都是需要理解的，特别是需要进行响应式开发的时候。只有理解了这些概念，我们才能更好地进行响应式布局
相对长度单位
em、rem、vw和vh
06 CSS生态相关
预处理器
sass、less和stylus
如何提高开发效率？
- 自定义变量：提高可复用
- 嵌套、作用域：避免全局污染、结构层次清晰、减少复杂组合选择器
- mixins、继承：提高可复用、可维护性
- 操作符、条件/循环语句、自定义函数：提高可编程能力、增加灵活性
总结
总的来说，CSS作为前端三剑客之一，是非常基础但却比较重要的一环，特别是对于有图片、视频需求的业务。另外，学号CSS能够设计出很炫酷的网页，这也非常令人向往呢。
