-
前置知识
- 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;
