CSS-形变 动画 表格

一.形变

/*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*/