一、2d形变

/*1.形变参考点: 三轴交界点*/
transform-origin: x轴坐标 y轴坐标;

/*2.旋转 rotate deg*/
transform: rotate(720deg);

/*偏移 translate px*/
transform: translateX(200px) translateY(200px);

/*缩放 scale 无单位*/
transform: scale(x轴比例, y轴比例)

/*注: 可以多形变, 空格隔开书写在一条transform属性中, 顺序一般会影响形变结果*/
/*形变不改变盒子布局, 只拿形变做动画*/

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>2d形变</title>
    <style type="text/css">
        div {
            width: 50px;
            height: 50px;
            background-color: red;
            margin: 30px auto 0;
            text-align: center;
            line-height: 50px;
            transition: 3s;
            
            /*形变参考点: 三轴交界点*/
            /*transform-origin: 0 0;*/
        }
        .d1 {
            /*形变: 只操作自身显示图层(让图层发生变化), 不影响盒子布局*/
            /*注: 不拿形变来布局, 只能形变来完成动画*/
            /*transform: rotate(45deg);*/
            /*transform: scale(3);*/
            /*transform: translateY(100px);*/
            /*margin-top: 50px;*/
        }

        
        .d2:hover {
            /*旋转: 旋转的是角度 deg*/
            /*transform: rotate(720deg);*/
            transform: rotateZ(7200deg);
        }
        .d3:hover {
            transform: rotateY(7200deg);
        }

        .d4:hover {
            /*偏移: 偏移的是距离 px*/
            /*如果需要发送多状态形变,需要分别写在一条transform属性设置中*/
            /*各个形变之间用空格隔开*/
            /*顺序一般会影响结果*/
            /*transform: translateY(100px) translateX(100px);*/
            
            /*不能这么书写: 所有形变效果的实现都是对transform一个属性进行设置*/
            /*下方这么设置,第二次赋值会覆盖第一次赋值(只能保留最后一次赋值)*/
            transform: translateX(100px);
            transform: translateY(100px);
        }
        .d5:hover {
            transform: translateX(100px) rotate(7200deg);
            /*transform: rotate(7200deg) translateX(100px);*/
        }
        .d6:hover {
            /*缩放: 缩放的是比例 无单位*/
            transform: scale(3, 0.5);
            /*transform: scaleX(3) scaleY(0.5);*/
        }
        .d7:hover {
            transform: translateX(100px) rotate(720deg) scale(2);
        }
        .d8:hover {
            margin-left: 1200px;
        }
    </style>
</head>
<body>
    <div class="d1">1</div>
    <div class="d2">2</div>
    <div class="d3">3</div>
    <div class="d4">4</div>
    <div class="d5">5</div>
    <div class="d6">6</div>
    <div class="d7">7</div>
    <div class="d8"></div>
</body>
</html>

二、动画

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <style type="text/css">
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            margin-left: 200px;
            margin-top: 50px;
        }

        /*实现动画*/
        /*1.设置动画体*/
        /*2.设置动画属性*/
        
        /*1.设置动画体
        @keyframes 动画名 {
            多种状态的动画体
        }
        */
        /*2.设置动画属性
        .box {
            animation: 动画相关属性;
        }
        */
        @keyframes hehe {
            /*起点省略采用的就是初始状态*/
            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: 动画名 时间 运动次数(无限次:infinite) 运动曲线*/
            animation: hehe 2s 1 linear;
        }


    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

三、表格

```html
<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: 可以嵌套任意类型标签, 可以快速实现多行文本垂直居中
```

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表格</title>
    <style type="text/css">
        .table1 {
            width: 500px;
            height: 500px;
            display: none;
        }
        th, td {
            padding: 20px;
        }

        .table2 td {
            /*border: 10px solid black;*/
        }
    </style>
</head>
<body>
    <!-- table的display: table -->
    <!-- table显示规则注意点: 当设置的盒子高度不足够显示内容时, 盒子高度由内容撑开, 当设置的高度大于显示内容所需高度,采用设置的高度 -->

    <!-- border: 设置边框宽度 -->
    <!-- cellspacing: 单元格间的间距 -->
    <!-- cellpadding: 单元格的内边距 == th, td设置padding -->
    <table class="table1" border="1" cellspacing="0">
        <!-- tr>th{标题}*3 -->
        <tr>
            <th>标题</th>
            <th>标题</th>
            <th>标题</th>
        </tr>
        <!-- (tr>td{单元格}*3)*3 -->
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </table>
    
    <!-- 边框的保留格式 => rules: rows | cols | groups | all -->
    <table class="table2" border="10" rules="all">
        <caption>表格标题</caption>
        <thead>
            <tr>
                <th>标题</th>
                <th>标题</th>
                <th>标题</th>
                <th>标题</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">单元格</td>
                <td rowspan="2" colspan="2">单元格</td>
                <!-- <td>单元格</td> -->
                <td>单元格</td>
            </tr>
            <tr>
                <!-- <td>单元格</td> -->
                <!-- <td>单元格</td> -->
                <!-- <td>单元格</td> -->
                <td>单元格</td>
            </tr>
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>单元格</td>
                <td colspan="2">单元格</td>
                <!-- <td>单元格</td> -->
                <td>单元格</td>
            </tr>
        </tfoot>
    </table>

    <!-- >>> display: table-cell => 可以嵌入任意类型标签, 可以快速实现多行文本垂直居中 -->

</body>
</html>

四、多个文本垂直居中

```html
<div class="sup">
<p>第一行文本</p>
<div>第二行文本</div>
</div>
```

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>多行文本垂直居中</title>
    <style>
        p {
            margin: 0;
        }
        .box, .b1 {
            width: 150px;
            height: 150px;
            margin: 10px auto;
            background-color: pink;
            text-align: center;
        }
        .b3 {
            line-height: 150px;
        }
        .b2 {
            line-height: 150px;
            /*不起作用*/
            /*vertical-align: middle;*/
        }
        .b1 {
            /*实现多行文本垂直居中 => 
            针对父级设置, 父级中的多个块级文本类子级标签垂直居中*/
            display: table-cell;
            vertical-align: middle;
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="b1">
            <p>好的</p>
            <p>真好</p>
            <div>好的</div>
            <div>真好</div>
        </div>
    </div>
    <div class="box b2">
        <p>好的</p>
        <p>真好</p>
    </div>
    <div class="box b3">好的真好好的真好好的真好好的真好</div>
</body>
</html>

五、小米形变案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>小米形变案例</title>
    <style type="text/css">
        .wrapper {
            width: 230px;
            height: 300px;
            background-color: #ddd;
            margin: 50px auto;
        }
        .box {
            width: 230px;
            height: 300px;
            background-color: yellow;
            transition: .3s;
            position: relative;
        }
        .footer {
            width: 230px;
            height: 0;
            overflow: hidden;
            background-color: red;
            transition: .3s;
            position: absolute;
            bottom: 0;
        }
        .wrapper:hover .box {
            transform: translateY(-5px);
            box-shadow: 0 5px 10px 2px #ddd;
        }
        .wrapper:hover .footer {
            height: 80px;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="box">
            <div class="footer">12345</div>
        </div>
    </div>
</body>
</html>