浏览器渲染过程：
- 根据html构建一个html树
- 根据css构建css树，又叫CSSOM
- 将两棵树合并成一颗渲染树，render tree
- 根据渲染树进行Layout布局（文档流、盒模型、计算大小和位置）定位（是否在文档流里）计算值
- Paint绘制（把边框颜色、文字颜色、阴影等画出来）
- Composite合成（根据层叠关系展示页面）
CSS重点概念：
* 文档流（Normal Flow）
指的是文档中元素的流动方式
从左到右：内联元素（又叫行内元素）
从上到下： 块级元素
脱离文档流的元素： float ; position:abosolute/fixed
* 盒模型
CSS盒模型本质上是一个盒子，封装周围的HTML元素，具体包括了外边距（Margin），边框（Border），内边距（Padding）和内容（Content）。
box-sizing:content-box;---width=content宽度；
box-sizing:border-box;---width=左右border+左右padding+content宽度
box-sizing:padding-box;---width=左右padding+content宽度。
* 层叠样式表
样式层叠：可以多次对同一选择器进行样式声明
选择器层叠：可以用不同选择器对同一个样式进行声明
文件层叠：可以用多个文件进行层叠
* 三种布局
float布局：用于IE,手机上不要用
flex布局：常用
grid布局：未大部分兼容，未来布局
* CSS定位
position：relative| absolute| fixed| sticky| static |inherit
* 层叠上下文
假定用户正面向（浏览器）视窗或网页，而 HTML 元素沿着其相对于用户的一条虚构的 z 轴排开，层叠上下文就是对这些 HTML 元素的一个三维构想。
特点：作用域 ，负z-index也逃不出作用域
* CSS动画
1. transition动画：
作用：补充中间帧
语法：transition：属性名 时长 过渡方式 延迟
注意：过渡必须要有始末；display：none=>block没法过渡，要改成visibility：hidden=>visible
2. animation动画
语法：animation：时长 过渡方式 延迟 次数 方向 填充模式 是否暂停 动画名，
@keyframes 动画名{from{} to{}}
或@keyframes 动画名{0%{} 30%{} …… 100%{}}
transition与animation的区别：
Animation和transition大部分属性是相同的，他们都是随时间改变元素的属性值，他们的主要区别是transition需要触发一个事件才能改变属性，而animation不需要触发任何事件的情况下才会随时间改变属性值，并且transition为2帧，从from .... to，而animation可以一帧一帧的。
