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