Heim > Artikel > Web-Frontend > CSS笔记--padding，margin为百分比计算时的参照对象_html/css_WEB-ITnose
CSS笔记--padding，margin为百分比计算时的参照对象_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:22:55786Durchsuche
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> 效果图
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Meta http-equiv属性_html/css_WEB-ITnoseNächster Artikel：使用Sass和Compass组合写CSS_html/css_WEB-ITnose