前端学习
动画及阴影
一、拼接网页
将区域整体划分起名 => 对其他区域布局不产生影响
提出公共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;
width: 1px;
height: 100px;
background-color: black;
}
.box:after {
content: "";
position: absolute;
width: 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
