一、水平垂直居中
1.position:absolute+transform:translate(-50%,-50%)
2.position:absolute+margin-top:-100px+margin-left:-100px(需要直到div的宽高)
3.flex
4.绝对定位的top，left，bottom，right都设置为0，然后通过margin:auto实现水平垂直居中
5.display:table-cell;vertical-align:middle;text-align:center
6.calc函数计算实现
二、display:none;--visibility:hidden--opcity:0的区别
display:none;
1.DOM结构：元素不会渲染
2.事件监听：不能监听DOM事件
3.继承：子元素不会继承
4.性能：改变此属性会重排，性能较差
visibility:hidden
1.DOM结构：元素会渲染
2.事件监听：能监听DOM事件
3.继承：子元素会继承，可以通过visibility:visible;来取消继承
4.性能：改变此属性会重绘，性能较好
opcity:0
1.DOM结构：元素会渲染
2.事件监听：能监听DOM事件
3.继承：子元素会继承，而且不能通过opcity：1;来取消隐藏
4.性能：改变此属性会重绘，性能较好
三、1px边框问题
产生原因：
window.divicePixelRatio=2(默认)
意思是：我们css中1px相当于实际移动端设备2px
解决方法：
1.border-width:0.5px
2.box-shadow内阴影模拟边框，
box-shadow:inset 0px -1px 1px 1px red;
3.通过viewport设置rem的基准值，就可以直接写rem了，较好的解决方案
4.伪类+transform
通过:after或:before设置border，结合定位
四、圣杯布局和双飞翼布局
两侧宽度固定，中间宽度自适应
五、浏览器渲染机制，重绘和回流
- 浏览器渲染机制
- 浏览器采用流式布局
- 浏览器会把HTML解析成DOM，把CSS解析成CSSOM，DOM和CSSOM合并就形成渲染树
- 有了渲染树，我们就知道所有节点的样式，然后计算他们在页面上的大小和位置，把它们绘制到页面上
- 注意：浏览器采用流式布局，对渲染树的计算只需要遍历一次就能完成，但table布局除外，他需要花费3备的时间，所以我们要尽量避免使用table布局
- 重绘
元素样式发生变化，但是不影响页面整个布局的情况下会进行重绘，如outline、visibility、color、background-color等 - 回流
影响部分或全部页面的布局时，会进行回流，回流的代价比重绘高
回流一定会引起重绘，但重绘不一定会引起回流 -
浏览器优化
浏览器是通过队列机制来批量更新布局，浏览器刷新频率为（60帧/s）,每刷新一次需要16.6ms，也就是说16.6ms浏览器会清空队列，但是在我们获取布局信息的时候，有一些属性或方法会强制浏览器刷新，触发重绘和回流并且清空队列，比如：
强制触发浏览器刷新
所以我们要尽量少使用以上属性和方法
- 减少重绘和回流
- 使用transform代替top
- 使用visibility(只触发重绘)代替display(触发回流)
- 尽可能在DOM树的末端改变class，影响尽量少的节点
- css选择器尽量不要嵌套过深，从右往左匹配
- 动画效果最好添加到position：absolute或fixed的元素上，不影响其他元素，只引发重绘，不引发回流，控制动画的速度可以使用requestAnimationFrame()
- 避免使用css表达式，calc()会引发回流
- 将频繁重绘或回流的节点设置为图层，如：will-change，video，iframe，cavas，防止影响别的节点
- CSS3硬件加速，transform，opacity等不会引起回流重绘
