Heim > Web-Frontend > CSS-Tutorial > Was ist die Boxgrößeneigenschaft?

Was ist die Boxgrößeneigenschaft?

爱喝马黛茶的安东尼
Freigeben: 2019-07-22 09:39:57
Original
15583 Leute haben es durchsucht

Was ist die Boxgrößeneigenschaft?

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;
Nach dem Login kopieren
Zugehörige Informationen : „CSS_CSS3-Wissen

Parameterbeschreibung

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>
Nach dem Login kopieren
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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage