浏览器渲染原理
- 根据html构建html树（DOM）
- 根据css构建css树（CSSOM）
- 将两颗树合并成一颗渲染树 （render tree）
- Layout布局（文档流、盒模型、计算位置和大小）
- Paint绘制（把边框颜色、文字颜色、阴影等画出来）
- Compose合成（根据层叠关系展示画面）
CSS布局
把页面分成一块一块，按左中右、上中下等排列。主要分为两种：
- 固定宽度布局，一般宽度为 960 / 1000 / 1024 px
- 不固定宽度布局，主要靠文档流的原理来布局
- 响应式布局也就是PC上固定宽度，手机上不固定宽度，是一种混合布局
float布局
子元素上加 `float: left 和 width`
在父元素上加 `.clearfix`
有经验者会留一些空间或者最后一个不设 width，不需要做响应式，因为手机上没有 IE，而这个布局是专门为 IE 准备的。IE 6/7 存在双倍 margin bug，解决办法有两个：
- 一是将错就错，针对 IE 6/7 把 margin 减半
- 二是神来一笔，再加一个 display: inline-block
flex布局
前置代码：display:flex;
是否换行：flex-wrap: wrap;
改变元素方向：flex-direction;
row | row-reverse 元素从左往右/从右往左
column | column-reverse 元素从上往下/从下往上
主轴对齐方式：justify-content;默认左右
flex-start 元素居初始位置对齐
flex-end 元素居结束位置对齐
center 元素居中间对齐
space-between 元素居两端对齐
space-around 间隔围绕元素两侧对齐
space-evenly 间隔围绕元素两侧对齐，间隔相等
次轴对齐方式：align-item;默认上下
flex-start 元素居初始位置对齐
flex-end 元素居结束位置对齐
center 元素居中间对齐
stretch 元素居两端对齐
多行内容：align-content;
flex-start 元素居初始位置对齐
flex-end 元素居结束位置对齐
center 元素居中间对齐
stretch 元素居两端对齐
space-between 元素居两端对齐
space-around 间隔围绕元素两侧对齐
grid布局
前置代码：display:grid | inline-grid;
grid-template-columns: 40px 50px auto 50px 40px ; //5列
grid-template-rows: 25% 100px auto ; //3行
grid-column-gap:10px; //列间隔
grid-row-gap:15px; //行间隔
值设置fr为份
CSS定位
布局是基于平面XY轴的内容填充，定位是基于立体形状中Z轴的内容填充。
position属性：
- static默认值，默认在文档流中
- relative相对位置，升起来但不脱离文档流
- absolute绝对定位，定位基准是祖先里的非static
- fixed固定定位，定位基准是viewport(有bug)
- sticky粘滞定位，类似excel中的非首行固定头部一样。(兼容性差)
正常如果写了一个absolute,会在父元素上写一个relative；如果写了absolute或fixed,一定要补上left和top。
z-index:每一层都相当于一张纸，里面的内容与其它页面无关。
CSS动画
transform变形
主要有translate位移，scale缩放,rotate旋转，skew倾斜；一般需要配合transition过渡，并且inline元素不支持此属性。
translate位移属性：
translateX(像素值)
translateY(像素值)
translate(像素值,像素值)
translateZ(像素值) 需添加视点perspective属性和值在其父元素上。
translate3D(x,y,z) 需添加视点perspective属性和值在其父元素上。
scale缩放属性：会影响border大小。
scaleX(倍数值)
scaleX(倍数值)
scale(倍数值，倍数值)
rotate旋转属性：
rotateX(角度) 沿X轴旋转
rotateY(角度) 沿Y轴旋转
rotateZ(角度) 沿Z轴旋转
transition过渡
CSS transitions 提供了一种在更改 CSS 属性时控制动画速度的方法。其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。
CSS transitions 可以决定哪些属性发生动画效果 (明确地列出这些属性)，何时开始 (设置 delay），持续多久 (设置 duration) 以及如何动画 (定义timing function，比如匀速地或先快后慢)。
transition：属性名 时间 过渡方式 延迟
animation动画
创建动画序列，需要使用 animation 属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节,同时可以通过使用@keyframes建立两个或两个以上关键帧来实现更复杂的动画。
animation-delay
设置延时，即从元素加载完成之后到动画序列开始执行的这段时间。
animation-direction
设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。
animation-duration
设置动画一个周期的时长。
animation-iteration-count
设置动画重复次数，可以指定 infinite 无限次重复动画
animation-name
指定由@keyframes描述的关键帧名称。
animation-play-state
允许暂停和恢复动画。
animation-timing-function
设置动画速度，即通过建立加速度曲线，设置动画在关键帧之间是如何变化。
