布局终极教程https://www.sweet-kk.top/css-layout/#/
1.元素为行内元素，设置父元素text-align:center
2.如果元素宽度固定，可以设置左右margin为auto;
3.如果元素为绝对定位，设置父元素position为relative，元素设left:0;right:0;margin:auto;
4.使用flex-box布局，指定justify-content属性为center
5.display设置为tabel-ceil
1.将显示方式设置为表格，display:table-cell,同时设置vertial-align：middle
2.使用flex布局，设置为align-item：center
3.绝对定位中设置bottom:0,top:0,并设置margin:auto
4.绝对定位中固定高度时设置top:50%，margin-top值为高度一半的负值
5.文本垂直居中设置line-height为height值
参考：
利用padding设置为百分比时是相对于父级元素的，因此同时设置width与padding-top(padding-bottom)为同一个百分数， 并且设置height:0即可实现一个正方形。
1.将元素的display设置为行内元素
2.两个元素全部使用浮动
3.一个元素左浮动，第二个元素不便，同时设置一个margin-left值
4.使用flex-box布局
可以对CSS3的新特性做一个简单的分类，在布局方面新增了flex布局，在选择器方面新增了例如:first-of-type,nth-child等选择器， 在盒模型方面添加了box-sizing来改变盒模型，在动画方面增加了animation、2d变换、3d变换等。在颜色方面添加透明、rgba等，在字体方面 允许嵌入字体和设置字体阴影，同时当然也有盒子的阴影，最后还有关键的媒体查询。
硬件加速是指通过创建独立的复合图层，让GPU来渲染这个图层，从而提高性能， 一般触发硬件加速的CSS属性有transform、opacity、filter，为了避免2D动画在 开始和结束的时候的repaint操作，一般使用tranform:translateZ(0)
参考：
DOM的变化影响到了元素的几何属性（宽高）,浏览器重新计算元素的几何属性，其他元素的几何 属性和位置也会受到影响，浏览器需要重新构造渲染树，这个过程称为重排，浏览器将受到影响的部分 重新绘制到屏幕上的过程称为重绘。引起重排的原因有1.添加或者删除可见的DOM元素，2.元素位置、 尺寸、内容改变，3.浏览器页面初始化，4.浏览器窗口尺寸改变，重排一定重绘，重绘不一定重排，减少 重绘和重排的方法：1.不在布局信息改变时做DOM查询，2.使用cssText或者className一次性改变属性 3.使用fragment，4.对于多次重排的元素，如动画，使用绝对定位脱离文档流，让他的改变不影响到其他 元素
参考：
2.网页性能管理详解
css3的animation是css3新增的动画属性，这个css3动画的每一帧是通过@keyframes来声明的，keyframes声明了动画的名称，通过from、to或者是百分比来定义 每一帧动画元素的状态，通过animation-name来引用这个动画，同时css3动画也可以定义动画运行的时长、动画开始时间、动画播放方向、动画循环次数、动画播放的方式， 这些相关的动画子属性有：animation-name定义动画名、animation-duration定义动画播放的时长、animation-delay定义动画延迟播放的时间、animation-direction定义 动画的播放方向、animation-iteration-count定义播放次数、animation-fill-mode定义动画播放之后的状态、animation-play-state定义播放状态，如暂停运行等、animation-timing-function 定义播放的方式，如恒速播放、艰涩播放等。
绝对定位是相对于最近的已经定位的祖先元素，没有则相对于body，绝对定位脱离文档流，而相对定位是相对于元素在文档中的初始位置，并且 相对定位的元素仍然占据原有的空间。
参考：
参考：
BFC也就是常说的块格式化上下文，这是一个独立的渲染区域，规定了内部如何布局，并且这个区域的子元素不会影响到外面的元素。其中比较重要的布局规则有内部box垂直放置、计算BFC的高度的时候，浮动元素也参与计算。 触发BFC的规则有根元素、浮动元素、position为absolute或fixed的元素、display属性为inline-block、table-cell、table-caption、flex、inline-fllex、overflow不为visible的元素。
参考：
css3动画可以通过设置animation-play-state属性为paused来设置这个动画暂停。