前端之形变

一.形变

/*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&三合一场所gt;单元格</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*/