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