在我们写样式的时候，常用到百分比这个东西，有时候很好用，有时候稍一混乱，可就掉入自己挖的坑里了
1、margin、padding的百分比
结论：margin、padding的百分比是按照父元素的宽度来计算的
我在页面上添加一个div.parent，并且添加了一个子元素div.child，样式代码如下
.parent{
width:400px;
height:200px;
background-color:beige;
border:1px solid #ddd;
}
.child{
width:200px;
height:100px;
background-color:orange;
margin-left:50%;
margin-top:50%;
}
然后浏览器打开页面：
页面效果图
我们会发现子元素的margin-top:50%;中的50%，竟然是按照父元素的width来计算的，不光margin如此，padding也是如此。
2、transform之translate
结论：transform中translate，如果传入百分比参数，计算是分别根据自身的宽高来进行的
我们都知道在css3里面引入了transform的样式，他可以实现多种元素转换效果，已达到我们想要的界面效果，那么translate的百分比是根据谁来计算的，你有没有注意呢？
同样的，我在页面上添加一个div.parent，并且添加了一个子元素div.child，这次我给子元素设置的transform样式，如下：
.parent{
width:400px;
height:200px;
background-color:beige;
border:1px solid #ddd;
}
.child{
width:200px;
height:100px;
background-color:orange;
transform:translate(50%,50%);
}
页面的效果如下：
页面效果图
所以说，transform:translate(50%,50%);样式的效果是，相对于原来的位置，移动各自宽度和高度的50%，这个样式用在我们居中效果上是非常好的，只要与absolute结合使用，就可以实现子元素的居中效果，而不用知道子元素自身的宽和高，比如下面的代码：
.parent{
width:100vw;
height:100vh;
position:relative;
}
.child{
width:200px;
height:100px;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
就是我们想要的弹窗效果了，页面效果图：
弹窗效果
