css - 比例缩放——需要帮助理解这个 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;

}

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

Answer 1

问题是li元素没有得到指定height。所以子元素只能由它的宽度来确定。

我们不能用height: 100%来指定parent-box，因为我们不知道 的高度li。唯一的解决方案是使用padding它，它仅由父元素的宽度决定，正如您在百分比规范中看到的那样。有写以包含元素的宽度百分比指定填充。