对元素的margin(外边距)可以设置百分数值。
对元素的 margin(外边距)设置百分数值:百分数是相对于父元素的width来计算的。
HTML:
<div class="contain">
<div class="d1"></div>
</div>
css:
.contain{
width: 500px;
height:400px;
}
.d1{
width:100px;
height: 100px;
background:#af2727;
margin: 1%;
}
控制台中查看 d1 盒子情况:
可以发现:margin的 top,right,bottom,left都是 5px,即相对于width计算得出。
为什么是相对于父元素的 width 呢?《CSS权威指南》中是这样说的:
正常流中的大多数元素都会足够高以包含其后代元素(包括其外边距)。如果一个元素的上下外边距是父元素的height的一个百分数,就可能导致一个无限循环,父元素的height会增加,以适应后代元素上下外边距的增加,而相应地,上下外边距又必须增加,以适应新的父元素height,如此继续。