样式中的margin、padding、translate百分比问

在我们写样式的时候，常用到百分比这个东西，有时候很好用，有时候稍一混乱，可就掉入自己挖的坑里了

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%);

}

就是我们想要的弹窗效果了，页面效果图：

弹窗效果