在前端开发过程中,设置样式参数margin 与 padding 值为百分数时,其具体值的计算方法需参照最近父级的width计算。
1)exp1: margin-top 为百分数
其中标签的嵌套关系为:
<div class="boxparent">
父级box
<div class="listbox">
子box
</div>
</div>
样式为:
.boxparent {
width: 400px;
height: 300px;
background-color: bisque;
}
.listbox {
width: 100px;
height: 100px;
margin-top: 30%;
background-color: aquamarine;
}
计算得到的margin-top值为:400 * 30% = 120px;
2)exp2: padding-top 为百分数
其中标签的嵌套关系为:
<div class="boxparent">
父级box
<div class="listbox">
子box
</div>
</div>
样式为:
.boxparent {
width: 400px;
height: 300px;
background-color: bisque;
}
.listbox {
width: 100px;
height: 100px;
padding-top: 30%;
background-color: aquamarine;
}
计算得到的padding-top值为:400 * 30% = 120px;
3) margin-left,padding-left,margin-right,padding-right,margin-bottom,padding-bottom同于margin-top / padding-top的计算方式。