经典的css样式

1.左右margin自动分配

margin：0 auto;
 calc(100% - 80px);
height: calc(100% - 80px);

2.左右居中

width：100px；
margin-left:auto;
margin-right:auto;

3.3等份

display: inline-block;
vertical-align: top;
 33%;
margin-bottom: 10px;

4.全部占满区域，上下左右居中

position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;

5.计算可视区域对角线，根据对角线长度撑开容器

let w = document.body.clientWidth;
let h = document.body.clentHeight;

this.layerEdge = 'calc(100%/2 -' + Math.ceil( Math.sqrt(w*w+h*h)/2 ) + 'px)';

6.动画animation---增强的过渡(transition)

动画里面运用transform变换

transform变换： scale(缩放)  rotate(旋转)  translate(移动 translateX translateY)  skew(倾斜)

animation: showname 300s infinite;//infinite(无线循环)

@keyframes showname{
  from { transform :rotateZ(0deg) }
  to { transform :rotateZ(360deg) }  
}