关于定位
1.0 定位
在页面中，布局不会首先考虑到定位，而是处理一些难度较大的盒子布局
正常情况下，能使用标准流就不会使用浮动，能使用浮动就不会使用定位
能使用宽高就不用内边距，能使用内边距，就不会用外边距
1.1 静态定位
静态定位一般使用在js特效的时候，会在某个状态下取消定位
使用了静态定位，遍偏移的值会失效，盒子等价于标准流
div {
position: static;
}
1.2 相对定位
相对定位根据自身的位置去移动，保留自身的位置，不影响其他元素的位置
一般使用在，子元素用了绝对定位，父元素就会加上相对定位
div {
position: relative;
top: 10px;
left: 20px;
}
1.3 绝对定位
如果包裹的外层元素没有定位
根据文档的位置去移动，不保留自身的位置（脱标），不影响其他元素的位置
如果包裹的外层元素含有相对定位或者绝对定位
根据含有定位的那个父元素去移动，不保留自身的位置（脱标），不影响其他元素的位置
div {
position: absolute;
top: 10px;
left: 20px;
}
1.4 固定定位
固定定位根据浏览器的窗口去移动，不保留自身的位置，不影响其他元素的位置
一般使用在，固定的导航，固定的广告，固定的返回顶部信息，和底部的一些广告
div {
position: fixed;
top: 10px;
left: 20px;
}
1.5 让元素水平垂直居中
让元素在版心的旁边，目的是不会随着浏览器宽度的大小而发生位置改变
.box {
width: 270px;
height: 190px;
position: fixed;
left: 50%;
bottom: 100px;
/* 如果版心是1200 那么实际偏移距离就是版心的一半 再加上若干的距离 */
margin-left: 610px;
}
让不规则的子元素在父盒子内水平垂直居中
.fa {
position: relative;
width: 530px;
height: 480px;
}
.box {
width: 270px;
height: 190px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
