Rumah >hujung hadapan web >html tutorial >CSS笔记--padding，margin为百分比计算时的参照对象_html/css_WEB-ITnose
CSS笔记--padding，margin为百分比计算时的参照对象_html/css_WEB-ITnose
- WBOYasal
- 2016-06-24 11:22:55796semak imbas
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> 效果图
Kenyataan：
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
Artikel sebelumnya：Meta http-equiv属性_html/css_WEB-ITnoseArtikel seterusnya：使用Sass和Compass组合写CSS_html/css_WEB-ITnose