一.形变
transform-origin: x轴坐标 y轴坐标;
transform: rotate(720deg);
transform: translateX(200px) translateY(200px);
transform: scale(x轴比例, y轴比例)
二.动画animation
@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;
}
}
.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;
}