1.如何在css3中启用硬件加速（1）将浏览器的渲染过程交给GPU（图形处理单元），而不是使用内置速度较慢的软件渲染器，可以让动画和过渡更高效光滑的。（GPU和CPU的渲染机制不同）（2）原理：新建一个复合层（通过css进行3D或CSS变换；和标签；CSS滤镜；元素覆盖，比如z-index属性),不会触发重绘。（3）如何启用：translate3d、rotate3d、scale3d、transform（4）不足：内存消耗大，所以不启用每个元素，只启用动画需要的元素；影响字体的抗锯齿效果。2.flexiblebox弹性布局1.任何容器都可以指定为flex布局展示：flex/inline-flex。2.容器上的属性flex-direction,flex-wrap,flex-flow,justify-content,align-items,align-content(1)flex-direction:rowrow-reservecolumncolumn-reserve(2)flex-wrap:nowrapwrapwrap-reserves(3)flex-flow：flex-direction和flex-wrap的简写。默认为：rownowrap(4)justify-content（主轴如何对齐）：flex-startflex-endcenterspace-betweenspace-around(5)align-item（横轴如何对齐）：flex-startflex-endcenterstrecthbaseline(6)align-content：作用和align-item一样，只在换行时起作用，会覆盖align-item，换行时不起作用一条线。flex-startflex-endcenterstretchspace-betweenspace-around3、容器项的属性order、flex-grow、flex-shrink、flex-basic、flex、align-self(1)order：定义项的顺序较小的一个更靠近前面。默认为0(2)flex-grow：定义item的缩放比例，以及剩余空间平分的标准。默认为0，即使有剩余空间也不会放大。(3)flex-shrink：定义item的缩小比例。默认为1，如果空间不够，会按比例缩小。如果one为0，则为0的item不收缩。(4)flex-basis：当一个行元素同时设置了flex-basis和width时，flex-basis具有更高的优先级(5)flex：是flex-growflex-shrinkflex-basis的缩写.默认值为01auto，最后两个值可选。建议优先使用flex属性。shortcut值有：auto(11auto),none(00auto)(6)align-self：允许单个item与其他item有不同的对齐方式，可以覆盖align-items属性。默认值为auto，它标识从父元素继承的align-items属性。如果没有父元素，相当于stretch。autoflex-startflex-endcenterbaselinestretch3.BFC(blockformattingcontexts)块级格式化上下文1.作用：是一个隔离的独立容器，容器内部的元素在布局时不会影响外部的元素。2.特点(1)同一个BFC容器下的元素底部外边距会重叠。为避免这种情况，它们必须放在不同的BFC容器中。(2)可以包含浮点数（clearfloats）的元素。因为浮动元素打破了正常的文档流。(3)可以防止元素被浮动元素覆盖（文字环绕效果）。可以达到左边定宽(float:)右边自适应的效果。（通过触发另一个元素的BRC来实现）3.如何成为BFC（1）body根元素（2）浮动元素：float时none以外的值（3）绝对定位元素：position（绝对固定）（4）displayasinline-blocktable-cellsflex(5)overflowvaluesotherthanvisible(hidden,auto,scroll)4.window.requestAnimationFrame(callback)1.告诉浏览器---你要执行一个动画，并且要求浏览器在下次重绘前调用指定的回调函数更新动画。2.是浏览器用于定时循环操作的接口，类似于setTimeout，主要作用是按帧重绘网页(1)一般显示每秒刷新60次，所以每次只刷新一次平均16.7毫秒。但是如果小于16.7ms要刷新一次（透支），可能会出现丢帧，导致动画不连续，卡顿。因此，setTimeout的最小建议定时器值为16.7ms。而requestAnimationFrame遵循浏览器的绘制频率：每次浏览器要重绘时，都会通知requestAnimationFrame。3、与setTimeout相比的优点：有系统来决定回调函数的执行时机，充分利用显示的刷新机制，节省系统资源。当页面不可见或不可用时，浏览器停止动画，节省CPU和内存消耗。4.与CSS3过渡和动画相比：(1)CSS3兼容性有限。(2)CSS3不能套用所有的属性，比如scrollTop的值(3)CSS3支持的动画效果是有限的。
css相关相关文章
