margin-top / padding-top 的百分比 究竟是多少？

       以前，我觉得 margin-top/padding-top 若是设置成%，获得的是 基于父对象总高度的百分比。

　　可是，这种想法是错的。由于在CSS标准里，是基于父对象宽度的百分比。

<style type="text/css">
    .demo {
        width: 400px;
        height: 200px;
        padding-top: 300px;
        border: 1px #f00 solid;
    }

    #aII {
        width: 50%;
        height: 95%;
        display: block;
        padding-left: 5%;
        padding-top: 6%;
        margin-top: 7%;
        border: 1px solid blue;
    }
</style>
<div class="demo">
    <div id="aII"></div>
</div>

　　 你以为 子div 的 margin-top是 28px,仍是 14px 呢？

　　用js代码测试了下

    let ele = document.getElementById('aII'),
    　　 omputedStyle = ele.ownerDocument.defaultView.getComputedStyle(ele, null);
    console.log(omputedStyle.getPropertyValue('margin-top')) //400* 7 = 28px
    console.log(omputedStyle.getPropertyValue('padding-top'))//400* 6 =24px