一.形变

/*1.形变参考点: 三轴交界点*/transform-origin: x轴坐标 y轴坐标;?/*2.旋转 rotate deg*/transform: rotate(720deg);?/*偏移 translate px*/transform: translateX(200px) translateY(200px);?/*缩放 scale 无单位*/transform: scale(x轴比例, y轴比例)?/*注: 可以多形变, 空格隔开书写在一条transform属性中, 顺序一般会影响形变结果*//*形变不改变盒子布局, 只拿形变做动画*/

二.动画animation

/*1.设置动画体*/@keyframes move { /*起点省略采用的就是初始状态*/ 0% {} 33.3% { margin-left: 800px; /*在每一个动画节点都需要明确所有做动画属性在该节点的属性值*/ margin-top: 50px; } 66.6% { margin-left: 500px; margin-top: 300px; } /*终点需要设置*/ 100% { margin-left: 200px; margin-top: 50px; }}?/*2.设置动画属性*//*animation: 动画名 时间 运动次数(无限次:infinite) 运动曲线*/.box { animation: move 2s 1 linear;}

三.表格

<table> <caption>表格标题</caption> <thead> <tr> <th>标题</th> <th>标题</th> <th>标题</th> </tr> </thead> <tbody> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> </tbody> <tfoot> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> </tfoot></table>

table的全局属性:border="1" 设置边框宽度cellspacing="10" 单元格间的间距cellpadding="10" 单元格的内边距rules="rows | cols | groups | all" 边框的保留格式?td的全局属性rowspan=‘2‘ 合并两行单元格colspan=‘3‘ 合并三列单元格?table的高度: 由内容和设置高度中的大值决定?table-cell: 可以嵌套任意类型标签, 可以快速实现多行文本垂直居中

四.多行文本垂直居中

<div class="sup"> <p>第一行文本</p> <div>第二行文本</div></div>.sup { /*实现多行文本垂直居中 => 针对父级设置, 父级中的多个块级文本类子级标签垂直居中*/ display: table-cell; vertical-align: middle;}/*注: 如果想调整sup的位置,可以给sup嵌套一个"位置层"*//*.box>.sup>p+div*/