Rumah > hujung hadapan web > html tutorial > CSS笔记--padding,margin为百分比计算时的参照对象_html/css_WEB-ITnose

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Lepaskan: 2016-06-24 11:22:55
asal
846 orang telah melayarinya

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>
Salin selepas log masuk

效果图

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>
Salin selepas log masuk

效果图

 

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan