2021-02-02

## 页面盒子移动的几种方法，2D转换的重点；

给盒子移动的几种方法包括：
1:定位移动；
2:盒子的外边距；
3:2D转换移动；
2D转换移动translate的特点：
1:定义2D转换中的移动，沿着X和Y轴移动元素；
2:translate最大的优点：不会影响到其他元素的位置，这个是2D转换最大的特点，是定位和盒子的外边距所没有的特点。
3:translate中的百分比单位是相对于自身元素的；
translate:(50%,50%);
1.1我们translate里面的参数是可以用%；
1.2如果里面的参数是%移动的距离是盒子自身的宽度或者高度来对比的。transform:translateX(50%);
这里的50%就是50px因为盒子的宽度是100px;
利用定位实现盒子垂直居中
首先子绝父相，父元素设置相对定位，子元素设置绝对定位
然后子元素设置top:50%;left：50%；还要设置margin-top:设置盒子本身高度的负的一半；margin-left:设置盒子本身宽度的负的一半；这个情况下也可以使用transform：translate(-50%,-50%)实现；
4:translate对行内元素是没有作用的。比如说是span 给它设置transfrom:transalte这是没有效果的。

坚持学习，分享中，希望这些知识点也可以对大家遇到问题时有所帮助！