.big{
padding-right: 100px;
padding-bottom: 100px;
width: 0;
height: 0;
background: yellow;
margin-top: 100px;
margin-left: 100px;
}
.inner {
width: 50%;
height: 50%;
background: black;
}
<div class="big">
<div class="inner">
</div>
</div>
正常情况下innerbox的宽高根据父元素的宽高进行百分比运算,即为0。
当innerbox添加了absolute绝对定位后,如果父元素且所有祖先元素没有进行定位,其宽高百分比将根据浏览器可视宽高进行计算。
.big{
padding-right: 100px;
padding-bottom: 100px;
width: 0;
height: 0;
background: yellow;
margin-top: 100px;
margin-left: 100px;
position: relative;
}
.inner {
width: 50%;
height: 50%;
background: black;
position: absolute;
}
如果其父元素进行了定位,宽高则根据父元素的盒子宽高(content + padding)(不含border!)进行百分比计算。