1、margin百分比介绍
可以对元素的margin设置百分数，百分数是相对于父元素的width计算，不管是margin-top/margin-bottom还是margin-left/margin-right。（padding同理）。
如果没有为元素声明width，在这种情况下，元素框的总宽度包括外边距取决于父元素的width，这样可能得到“流式”页面，即元素的外边距会扩大或缩小以适应父元素的实际大小。如果对这个文档设置样式，使其元素使用百分数外边距，当用户修改浏览窗口的宽度时，外边距会随之扩大或缩小。
2、为什么margin-top/margin-bottom的百分数也是相对于width而不是height
对于这个问题可以看下知乎上一个用户的回答：margin-top/margin-bottom的百分数也是相对于width而不是height
CSS权威指南中的解释：
我们认为，正常流中的大多数元素都会足够高以包含其后代元素（包括外边距），如果一个元素的上下外边距时父元素的height的百分数，就可能导致一个无限循环，父元素的height会增加，以适应后代元素上下外边距的增加，而相应的，上下外边距因为父元素height的增加也会增加，形成无限循环
3、为什么选择width不会形成循环？
这要从width的计算方式说起。块状元素如果width没有定义，宽度会最大化；行内元素、行内块状元素的width如果没有定义，或者显示声明为auto，元素框会自动收缩以适应内容。如果子元素可以成功设置margin，肯定是行内块状元素或块状元素，父元素肯定也是行内块状元素或块状元素。
如果父元素是块状元素，没有定义width，父元素宽度会最大化，子元素的margin对父元素的宽度没有影响。
<style>
.container{border:1px solid #ddd;}
.outerbox1,.outerbox2{width:200px;border:1px solid red;}
.outerbox1{margin-left:510px;}
.outerbox2{margin-left:60%;}
</style>
<div class='container'>
<!--子元素margin为数值，不影响块状父元素宽度-->
<div class='outerbox1'>块状子元素</div>
</div>
<br/><br/><br/>
<div class='container'>
<!--子元素margin为百分比，不影响块状父元素宽度。-->
<div class='outerbox2'>块状子元素</div>
</div>效果如下图所示：
如果父元素是行内块状元素，子元素margin值如果是数值，对行内块状元素宽度有影响；但是如果子元素margin值是百分比，对行内块状元素宽度没有影响，而是会根据子元素的margin值去调整子元素的宽度，让子元素适应父元素的宽度。
<style>
.container{display:inline-block;border:1px solid #ddd;}
.outerbox1,.outerbox2{display:inline-block; border:1px solid red;}
.outerbox1{margin-left:20px;}
.outerbox2{margin-left:60%;}
</style>
<div class='container'>
<!--子元素margin为数值，会影响行内块状父元素宽度-->
<div class='outerbox1'>行内块状子元素</div>
</div>
<br/><br/><br/>
<div class='container'>
<!--行内块状子元素margin为百分比，会影响行内块状父元素宽度。会影响子元素本身的宽度，以适应父元素宽度-->
<div class='outerbox2'>行内块状子元素</div>
</div>
效果如下图所示：
padding百分比和margin百分比类似。