Heim >Web-Frontend >CSS-Tutorial >So verwenden Sie das Box-Sizing-Attribut
So verwenden Sie das Box-Sizing-Attribut
- 青灯夜游Original
- 2019-01-31 10:01:256860Durchsuche
Mit dem Box-Sizing-Attribut können Sie bestimmte Elemente definieren, die auf eine bestimmte Weise zu einem bestimmten Bereich passen. Die Syntax für die Verwendung dieses Attributs lautet „box-sizing: content-box|border-box|inherit;“ .
Die Betriebsumgebung dieses Artikels: Windows 7-System, CSS3-Version, Dell G3-Computer.
CSS3-Boxgrößeneigenschaft
Funktion: Ermöglicht die Definition des spezifischen Inhalts, der sich genau an einen bestimmten Bereich anpasst.
Hinweis: Internet Explorer, Chrome, Safari und Opera unterstützen das Box-Sizing-Attribut. Firefox erfordert das Präfix -moz-.
Syntax:
box-sizing: content-box|border-box|inherit;
| Wert | Beschreibung | content-box td> |
Breite und Höhe werden separat auf die Inhaltsbox des Elements angewendet. Zeichnet die Polsterung und Ränder des Elements außerhalb seiner Breite und Höhe. |
| border-box | Die für das Element festgelegte Breite und Höhe Bestimmt den Rahmenrahmen des Elements.
Die Breite und Höhe des Inhalts werden durch Subtrahieren des Randes und der Innenfüllung von der eingestellten Breite bzw. Höhe ermittelt. |
| inherit | Gibt an, dass der Wert des Box-Sizing-Attributs geerbt werden soll vom übergeordneten Element. |
<!DOCTYPE html>
<html>
<head>
<style>
div.container
{
width:30em;
border:1em solid;
margin: 100px auto;
}
div.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>Rendering: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Studium aller hilfreich sein wird. Weitere spannende Inhalte finden Sie in den entsprechenden Tutorial-Kolumnen auf der chinesischen PHP-Website! ! ! Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Box-Sizing-Attribut. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!