CSS笔记padding，margin为百分比计算时的参照对象 - 青草圆

div的padding为百分比的两种情况

padding-top,padding-bottom,margin-top,margin-bottom是百分比时是按照当前元素的父级元素的宽度来计算的

1. 当子div的宽度是百分比时

html代码

.container{
width:100%;
}

.row{
 width:100%; 
} 
.row:before , 
.row:after{ 
　　display: block; 
　　content:''; 
　　height: 0; 
　　clear:both; 
} 
.col-md-4{ 
　　float: left; 
　　width:33.33%; 
} 
.blue-bg,
.red-bg,
.yellow-bg{
　　padding-top:33.333%;
}

.blue-bg{
background-color: #428bca;
}

.red-bg{
background-color: red;
}

.yellow-bg{
background-color: yellow;
}

效果图

2. 当子div的宽度是具体像素时

html

效果图