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

  

上一篇:爬虫 需要什么样的 CPU,内存 和带宽


下一篇:【servlet3.0新特性】Annotation注解配置