欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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; }

效果图

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

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

html


无标题

效果图

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