> 웹 프론트엔드 > HTML 튜토리얼 > CSS笔记--padding,margin为百分比计算时的参照对象_html/css_WEB-ITnose

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

WBOY
풀어 주다: 2016-06-24 11:22:55
원래의
795명이 탐색했습니다.

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>
로그인 후 복사

效果图

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>
로그인 후 복사

效果图

 

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿