前端之形變

一.形變

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