css - 按比例缩放——需要帮助理解这个 css 代码是如何工作的

Question

我根据以下 stackoverflow 问题/答案创建了这个 fiddle ( 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 ，它仅由父元素的宽度指定，如您所见 here在百分比规范中。上面写着 Specifies the padding in percent of width of the containing element。