1.flex弹性盒布局
1.1flex-direction：决定主轴的方向(row表示水平排列，column表示垂直排列)
1.2flex-wrap：默认是no-wrap值表示不换行，可以使用wrap值来实现换行
1.3flex-flow：是flex-direction和flex-wrap的简写，可以使用flex-flow:column wrap实现垂直换行
1.4justify-content：定义了项目在主轴上的对齐方式，常用center属性做水平居中，space-between来做排列组合
1.5align-items：定义了项目在交叉轴上如何对齐，center属性实现垂直居中，可以配合justify-content实现居中
2.浏览器渲染原理
DOM Tree：浏览器会将HTML解析成树形的数据结构
CSS Rule Tree：浏览器将CSS解析成树形的数据结构
Render Tree：DOM和CSSOM合并生成了Render Tree
layout：有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系，从而去计算出每个节点在屏幕中的位置
painting：按照算出来的规则，通过显卡，把内容显示到屏幕上
reflow(回流)：当浏览器发现某个部分发生了点变化影响了布局，需要倒回去重新渲染，内行称这个回退的过程叫 reflow。reflow 会从 <html> 这个 root frame 开始递归往下，依次计算所有的结点几何尺寸和位置。reflow 几乎是无法避免的。现在界面上流行的一些效果，比如树状目录的折叠、展开（实质上是元素的显 示与隐藏）等，都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲 染。通常我们都无法预估浏览器到底会 reflow 哪一部分的代码，它们都彼此相互影响着。
repaint（重绘）：改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸没有变。注意：
(1)display:none 的节点不会被加入Render Tree，而visibility: hidden 则会，所以，如果某个节点最开始是不显示的，设为display:none是更优的。
(2)display:none 会触发 reflow，而 visibility:hidden 只会触发 repaint，因为没有发现位置变化。
(3)有些情况下，比如修改了元素的样式，浏览器并不会立刻reflow 或 repaint 一次，而是会把这样的操作积攒一批，然后做一次 reflow，这又叫异步 reflow 或增量异步 reflow。但是在有些情况下，比如resize 窗口，改变了页面默认的字体等。对于这些操作，浏览器会马上进行 reflow。
3.CSS动画
transform包含translate（位移）| scale（缩放）| rotate（旋转）| skew（倾斜）
translate(-50%,-50%)可以结合定位使元素在盒子中实现居中
transiton: 属性名 时长 过度方式 延迟--->transition:left 200ms linear 2s其中可以用all表示所有属性,常见过度方式有:linear(匀速),ease(缓动),ease-in(淡入)，ease-out（淡出）,ease-in-out
注意：并不是所有的属性都能使用过渡的，如display:none<->display:block,一般会使用visibility:visible<->visibility:hidden;
