之前,我以为 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