margin与padding值设置为百分数时，其值的计算参照最近父级元素width

在前端开发过程中，设置样式参数margin 与 padding 值为百分数时，其具体值的计算方法需参照最近父级的width计算。

1）exp1: margin-top 为百分数

其中标签的嵌套关系为：

<div class="boxparent">
    父级box
    <div class="listbox">
      子box
    </div>
  </div>

样式为：

.boxparent {
    width: 400px;
    height: 300px;
    background-color: bisque;
 }

 .listbox {
    width: 100px;
    height: 100px;
    margin-top: 30%;
    background-color: aquamarine;
  }

计算得到的margin-top值为：400 * 30% = 120px;

2）exp2: padding-top 为百分数

其中标签的嵌套关系为：

<div class="boxparent">
    父级box
    <div class="listbox">
      子box
    </div>
  </div>

样式为：

.boxparent {
    width: 400px;
    height: 300px;
    background-color: bisque;
 }

 .listbox {
    width: 100px;
    height: 100px;
    padding-top: 30%;
    background-color: aquamarine;
  }

计算得到的padding-top值为：400 * 30% = 120px;

3) margin-left，padding-left，margin-right，padding-right，margin-bottom，padding-bottom同于margin-top / padding-top的计算方式。