CSS笔记--padding，margin为百分比计算时的参照对象_html/css

CSS笔记--padding，margin为百分比计算时的参照对象_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:22:55

原创

919人浏览过

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

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

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

html代码

立即学习“前端免费学习笔记（深入）”；

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta chaset="utf-8"><title>无标题</title><style type="text/css">html,body{margin:0;padding:0;height: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{padding-top: 33.33%;background-color: #428bca;}.red-bg{padding-top: 33.33%;background-color: red;}.yellow-bg{padding-top: 33.33%;background-color: yellow;}.container{width:100%;}</style></head><body><div class="container"><div class="row"><div class="col-md-4 blue-bg"></div><div class="col-md-4 red-bg"></div><div class="col-md-4 yellow-bg"></div></div></div></body></html>

登录后复制

效果图

知识画家

AI交互知识生成引擎，一句话生成知识视频、动画和应用

查看详情

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

html

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width , initial-scale=1"><meta chaset="utf-8">	<title>无标题</title>	<style type="text/css">		html,body{			margin:0;			padding:0;			height:100%;		}		.row{			width:100%;		}		.row:before , .row:after{			display: block;			content:'';			height: 0;			clear:both;		}		.col-md-4{			float: left;			width:100px;		}		.blue-bg{			padding-top: 100%;			background-color: #428bca;		}		.red-bg{			padding-top: 100%;			background-color: red;		}		.yellow-bg{			padding-top: 100%;			background-color: yellow;		}		.container{			width:100%;		}	</style></head><body>	<div class="container">		<div class="row">			<div class="col-md-4 blue-bg"></div>			<div class="col-md-4 red-bg"></div>			<div class="col-md-4 yellow-bg"></div>		</div>	</div></body></html>

登录后复制

效果图