CSS笔记--padding，margin为百分比计算时的参照对象_html/css_WEB-ITnose
Jun 24, 2016 am 11:22 AM
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>效果图
Heißer Artikel
Hot-Tools-Tags
Heißer Artikel
Heiße Artikel -Tags
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Schwierigkeiten bei der Aktualisierung der Zwischenspeicherung offizieller Konto -Webseiten: Wie vermeiden Sie den alten Cache, der sich auf die Benutzererfahrung nach der Versionsaktualisierung auswirkt?
Mar 04, 2025 pm 12:32 PM
Schwierigkeiten bei der Aktualisierung der Zwischenspeicherung offizieller Konto -Webseiten: Wie vermeiden Sie den alten Cache, der sich auf die Benutzererfahrung nach der Versionsaktualisierung auswirkt?
Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren?
Mar 17, 2025 pm 12:27 PM
Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren?
Wie füge ich PNG -Bildern auf Webseiten effizient Schlaganfalleffekte hinzu?
Mar 04, 2025 pm 02:39 PM
Wie füge ich PNG -Bildern auf Webseiten effizient Schlaganfalleffekte hinzu?
Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung?
Mar 20, 2025 pm 06:05 PM
Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung?
Was sind die Sicherheitsauswirkungen der Verwendung von IFRames und wie kann ich sie mildern?
Mar 18, 2025 pm 02:51 PM
Was sind die Sicherheitsauswirkungen der Verwendung von IFRames und wie kann ich sie mildern?
Wie benutze ich den HTML5 & lt; Meter & gt; Element zur Anzeige numerischer Daten innerhalb eines Bereichs?
Mar 12, 2025 pm 04:08 PM
Wie benutze ich den HTML5 & lt; Meter & gt; Element zur Anzeige numerischer Daten innerhalb eines Bereichs?
Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5?
Mar 17, 2025 pm 12:20 PM
Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5?
Wie benutze ich die HTML5 & lt; Zeit & gt; Element, um Daten und Zeiten semantisch darzustellen?
Mar 12, 2025 pm 04:05 PM
Wie benutze ich die HTML5 & lt; Zeit & gt; Element, um Daten und Zeiten semantisch darzustellen?
