前端学习

　　动画及阴影

　　一、拼接网页

　　将区域整体划分起名 => 对其他区域布局不产生影响

　　提出公共css => reset操作

　　当有区域发送显示重叠（脱离文档流导致的），需要通过z-index调整层级

　　一定需要最外层，且最外层做自身布局时，不要做过多布局操作

　　二、过渡

　　transition属性

　　transition：过渡时间（必须） 延迟时间（一般不设） 过渡属性（一般采用all默认值） 过渡曲线（贝塞尔曲线）（cubic-bezier()）

　　过渡属性具体设置给初始状态还是第二状态 根据具体需求

　　

/*过渡的持续时间*/
transition-duration: 2s;
/*延迟时间*/
transition-delay: 50ms;
/*过渡属性*/
/*单一属性 | 属性1，...,属性n | all*/
transition-property: all;
/*过渡曲线*/
/*cubic-bezier() | ease | ease-in | ease-out | ease-in-out | linear*/
transition-timing-function: cubic-bezier(0,2.23,0.99,-1.34)

总结： 1.尽量悬浮静止的盒子，控制运动的盒子

　　　 2.不能确定区间范围的属性值，不会产生动画效果

　　　 display 不能做动画 | opacity 可以做动画

　　三、阴影

　　x轴偏移量 y轴偏移量 虚化程度  阴影宽度 阴影颜色

　　box-shadow: 0 0 10px 10px black;

　　一个盒子可以设置多个阴影，每一套阴影间用逗号隔开

　　box-shadow: 0 -10px 10px -5px black, 0 10px 10px -5px black;

　　四、伪类实现边框

　　自身需要定位

　　.box {

　　　　position: relative;

　　}

　　伪类通过定位来完成图层的布局

　　.box:before {

　　　　content: "";

　　　　position: absolute;

　　　　top: 10px;

　　　　left: 0;

　　　　 1px;

　　　　height: 100px;

　　　　background-color: black;

　　}

　　.box:after {

　　　　content: "";

　　　　position: absolute;

　　　　 100px;

　　　　height: 1px;

　　　　background-color: black;

　　　　top: 0;

　　　　left: 10px;

　　}

　　五、形变

　　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% {

　　　　　　margin-left: 200px;

　　　　　　margin-top: 50px;

　　　　}

　　　　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