css相关

一、css3 如何启用硬件加速

（1）将浏览器的渲染过程交给GPU（graphics processing unit）处理，而不是使用自带的比较慢软件的渲染器，可以让animation和transition更加顺畅。（GPU和CPU的渲染机制不一样）
（2）原理：创建一个新的复合图层（通过css的3D或者CSS transform；<video>和<canvas>标签；CSS filters；元素覆盖，比如z-index属性），不触发重绘。
（3）如何开启：translate3d,rotate3d,scale3d,transform
（4）不足：耗内存，所以不要让每个元素开启,只开启动画需要的元素；影响字体的抗锯齿效果。

二、flexible box弹性布局

1、任何一个容器都可以指定为flex布局 display: flex / inline-flex。
2、容器上的属性flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content
(1) flex-direction：row row-reserve column column-reserve
(2) flex-wrap：nowrap wrap wrap-reserves
(3) flex-flow: flex-direction和flex-wrap的简写形式。默认是：row nowrap
(4) justify-content(主轴如何对齐): flex-start flex-end center space-between space-around
(5) align-item(交叉轴如何对齐): flex-start flex-end center strecth baseline
(6) align-content: 作用同align-item，换行的时候才起作用，会覆盖align-item，单行的时候不起作用。flex-start flex-end center stretch space-between space-around
3、容器项目的属性order, flex-grow, flex-shrink, flex-basic, flex, align-self
(1) order: 定义项目的排列顺序 数值越小 越靠前。默认是0
(2) flex-grow: 定义项目的放大比例，平分剩余空间的标准。默认0，就算有剩余空间，也不放大。
(3) flex-shrink: 定义了项目的缩小比例。默认为1，如果空间不够 增等比例缩小。若有一个为0，则为0的项目不缩小。
(4) flex-basis: 当一个row元素同时被设置了flex-basis和width，flex-basis具有更高的优先级
(5) flex: 是flex-grow flex-shrink flex-basis的简写。默认值为0 1 auto，后两个值可选。建议优先使用flex这个属性。快捷值有：auto(1 1 auto)、none(0 0 auto)
(6) align-self: 允许单个项目有和其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，标识继承父元素的align-items属性，如果没有父元素，则等同于stretch。auto flex-start flex-end center baseline stretch

三、BFC（block formatting contexts）块级格式化上下文

1、作用：是个隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素。
2、特性
（1）同一个BFC容器下面的元素 下边距margin会发生重叠，要避免，则要放在不同的BFC容器
（2）可以包含浮动的元素（清除浮动）。因为浮动的元素会脱离普通的文档流。
（3）可以防止元素被浮动元素遮盖（文字环绕效果）。可以实现左边固定宽度（float：），右边自适应的效果。（通过触发另外一个元素的BRC实现）
3、如何成为BFC
（1）body根元素
（2）浮动元素：float处none外的值
（3）绝对定位元素：position(absolute fixed)
（4）display为inline-block table-cells flex
（5）overflow除了visible以外的值（hidden，auto，scroll）

四、window.requestAnimationFrame(callback)

1、告诉浏览器---希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。
2、是浏览器用于定时循环操作的一个接口，类似于setTimeout，主要用途是按帧对网页进行重绘
（1）一般显示器1s刷新60次，所以平均每16.7ms才刷新一次。但是如果想要小于16.7ms就刷新一次（过度绘制），可能出现丢帧现象，导致动画不连续，卡顿。所以，setTimeout的定时器值最小推荐16.7ms。而requestAnimationFrame就是跟着浏览器的绘制频率走：浏览器每次要重绘，就会通知requestAnimationFrame。
3、与setTimeout相比好处：有系统来决定回调函数的执行时机，充分利用显示器的刷新机制，比较节省系统资源。当页面处于不可见或不可用状态时，浏览器就会停止动画，节省CPU和内存消耗。
4、和css3的transition和animation相比：
（1）css3兼容性有限。
（2）css3不能应用所有属性，比如scrollTop的值
（3）css3支持的动画效果有限。