Heim > Artikel > Web-Frontend > Was ist die Boxgrößeneigenschaft?
Was ist die Boxgrößeneigenschaft?
- 爱喝马黛茶的安东尼Original
- 2019-07-22 09:39:5715571Durchsuche
Definition und Verwendung des Box-Sizing-Attributs
Das Box-Sizing-Attribut ist ein neues Attribut in CSS3, das Folgendes ermöglicht Sie definieren bestimmte Elemente so, dass sie in einen bestimmten Bereich passen (wenn Sie beispielsweise zwei umrandete Boxen nebeneinander platzieren müssen, können Sie dies tun, indem Sie die Box-Sizing-Eigenschaft auf „border-box“ setzen, was dazu führt, dass Browser zum Rendern der Box. Es gibt eine Box mit einer bestimmten Breite und Höhe, und der Rand und die Polsterung werden in die Box eingefügt.
Die Browser Internet Explorer, Opera und Chrome unterstützen das Attribut „Boxgröße“ nicht Unterstützt dieses Attribut noch, aber es ersetzt das Box-Sizing-Attribut-Syntaxformat
box-sizing: content-box/border-box/inherit;Zugehörige Informationen : „CSS_CSS3-Wissen 》
content-box: Dies ist das durch CSS2.1 festgelegte Breiten- und Höhenverhalten. Die Breite und height werden jeweils auf das Inhaltsfeld des Elements angewendet.
border-box: Die für ein Element festgelegte Breite und Höhe bestimmen das Rahmenfeld des Elements, d. h. alle Polsterungen und Ränder Die für das Element angegebenen Ränder werden innerhalb der eingestellten Breite und Höhe gezeichnet. Die Breite und Höhe des Inhalts können durch Subtrahieren des Rahmens bzw. der Polsterung von der eingestellten Breite und Höhe ermittelt werden. inherit: Gibt an, dass der Wert des Box-Sizing-Attributs vom übergeordneten Element geerbt werden soll.Instanz:
<!DOCTYPE html><html><head><meta charset="utf-8" />
<title>css3 box-sizing属性笔记</title><style type="text/css">
body{background-color: #aaa;}div.container{width:30em;border:1em solid;}
.box{box-sizing:border-box;-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;border:1em solid red;float:left;}
</style></head><body><div class="container">
<div class="box">这个 div占据左半部分。</div><div class="box">这个 div占据右半部分。</div>
</div></body></html>Laufergebnis:
Das obige ist der detaillierte Inhalt vonWas ist die Boxgrößeneigenschaft?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!