比例缩放 - 需要帮助了解此css代码的工作原理

Question

我根据以下stackoverflow问题/答案创建了这个小提琴（http://jsfiddle.net/HfpHf/1/）：https://stackoverflow.com/a/9236397

相关位是：

.box-parent {
width:95%;
padding-bottom:95%;
height:0;
position:relative;

}

.box {
border-radius: 10%;
width:100%; 
height:100%;
position:absolute;
left:0;
background-color:rgb(17, 17, 17);
color: #ffffff;
text-align: center;

}

问题是我真的不明白它是如何工作的或原因。更具体地说，在父级上设置高度为0，为什么将padding-bottom设置为与宽度相同的百分比会导致子级为正方形？

Answer 1

问题是li元素没有指定height。因此，子元素必须仅通过其宽度来确定。

我们无法使用height: 100%来指定parent-box，因为我们不知道li的高度。 唯一的解决方案是使用padding，它仅由父元素的宽度指定，因为您可以在百分比指定中看到here。写入指定填充元素宽度百分比的填充。