3. 非定位元素的宽高百分比计算不会将 padding 计算在内

[fedono]

<div class="box">
    <div class="child"></div>
</div>

.box {
    height: 160px;
    padding: 30px;
    box-sizing: border-box; background-color: #beceeb;
    position: relative;
}
.child {
    height: 100%;
    width: 100%;
    background-color: #cd0000;
    /*position: absolute;*/
}

在child 中，如果没有position: absolute; 那么child 显示的时候是在box 中，占据了除padding 的所有内容
但是在有position: absolute; 的时候，那么child 就会显示和box 一样大小，然后在box 中距离顶部和左边30px的距离