一.形變

    /*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
transition:
    一個在執行的過程中宣告關鍵幀的動畫，可以一旦元素的屬性發生變化就可以形成一個動畫，
    然後transition-property，transition-duration，transition-timing-function，transition-delay來設定動畫的屬性

animation:
    通過@keyframes 來設定關鍵幀，在沒個關鍵幀中設定在該幀動畫中某個元素的一個或幾個屬性的變化。
    animation-name，animation-duration，animation-timing-function，animation-delay，
    animation-iteration-count，animation-direction來設定動畫的屬性


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