transition过渡、transform用于位移或动画

1.图标+文字显示在一行时，要进行水平居中对齐用vertical-align:middle;

顶线（top）、中线（middle）、基线（baseline）、底线（bottom）。图片默认和基线对齐，图片下方会留白，解决方案如下：

• 1、给img（图片）设置display: block;
• 2、给img（图片）设置vertical-align: bottom;
• 3、修改line-height值（div的line-height）
• 4、div的font-size=0

2.banner模块里的图的HTML用div>ul>li>a>img的模式，能进行轮播。banner上的其他模块用定位来做。

3.用transition进行过渡。

transition-property要过渡的属性  transitionduration花费时间  transition-timing-function运动曲线  transition-delay何时开始 。

如果有多组属性需要用逗号隔开，哪个标签做过渡动画写到哪个标签身上。

transition:width 0.5s ease 2s,height 0.5s;   或  transition:all 0.5s;   

4.transform用于位移或动画。类似position:relative;
移动自己宽高的一半，transform:translate(-50%,-50%)；

移动自己x轴200px，transform:translateX(200px)；注意：只有x，y为0。

移动自己y轴200px，transform:translateY(200px)；

缩放自己宽高的1.1倍，transform:scale(1.1);注意：只有x，y等比例缩放。

即移动又缩放，需要连写。transform:translate(-50%,-50%) scale(1.1)；这样写有顺序，会先移动后缩放。注意：这样的动画会抖动或不连贯，可以先放一个大盒子，里面包裹要做动画的小盒子。

旋转45°，transform:rotate(45deg);

设置旋转中心点（即原点）为右下角，   transform-origin:right bottom；    也可以用像素替换，transform-origin:10px 10px；