CSS笔记padding,margin为百分比计算时的参照对象 - 青草圆
程序员文章站
2024-01-27 13:13:10
...
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
无标题
效果图
上一篇: php 环境配置(windows环境)_PHP教程
下一篇: 十个Python程序员易犯的错误