-
前置知识
- height是作用域内容(content)区域的
-
padding和margin用百分比的时候是怎么算的？父元素的宽度。注意，不是根据父元素相应的属性，就是父亲的width
自身的height是0
以下代码，外面盒子是100x10的，里面的width设置成了100%，显然，inner.width=100px，那么，inner.padding-bottom设置成100%，结果将是100px
<body><div class="box"><div class="inner"></div></div>
</body>
<style>.box{width: 100px;height: 10px;}.inner{width: 100%;padding-bottom: 100%;background-color: red;}
</style>
盒子模型反映，content的height是0，在这种情况下，inner在计算padding属性的时候，会以父元素的width为基准，所以会是100px*100%=100px;
