除了height以外垂直方向上的margin-top（bottom）或者padding-top（bottom）的百分比取值都是相对于父元素的宽度
在默认的content-box盒模型下元素的width就是指的content的宽度：
.box {
width: 200px;
height: 400px;
padding: 50px;
border: 1px solid #000;
}
.child {
width: 100px;
height: 50%;
padding-bottom: 50%;
border: 1px solid #000;
}
原文：https://www.cnblogs.com/feixiablog/p/9341423.html