Box

Box

Gr??e

Gr??e

英 ['sa?z??] 美 ['sa?z??]

CSS-Boxgr??eneigenschaft Syntax

Was es macht: Mit dem Attribut box-sizing k?nnen Sie bestimmte Elemente definieren, die auf eine bestimmte Weise zu einem bestimmten Bereich passen. Wenn Sie beispielsweise zwei umrandete Boxen nebeneinander platzieren müssen, k?nnen Sie dies tun, indem Sie box-sizing auf ?border-box“ setzen. Dadurch rendert der Browser ein Feld mit der angegebenen Breite und H?he und fügt die R?nder und den Innenabstand in das Feld ein.

Syntax: box-sizing: content-box|border-box|inherit

Beschreibung: content-box Dies ist das von CSS2.1 festgelegte Breiten- und H?henverhalten. 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 ein Element festgelegte Breite und H?he bestimmen die Rahmenbox des Elements. Das hei?t, alle für das Element angegebenen Abst?nde und R?nder werden innerhalb der festgelegten Breite und H?he gezeichnet. Die Breite und H?he des Inhalts werden durch Subtrahieren des Rands und der Polsterung von der eingestellten Breite bzw. H?he ermittelt. inherit gibt an, dass der Wert der Box-Sizing-Eigenschaft vom übergeordneten Element geerbt werden soll.?

Hinweis: Internet Explorer, Opera und Chrome unterstützen das Box-Sizing-Attribut. Firefox unterstützt eine alternative Eigenschaft -moz-box-sizing.

CSS-Boxgr??eneigenschaft Beispiel

<!DOCTYPE html>
<html>
<head>
<style> 
div.container
{
width:30em;
border:1em solid;
}
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 占據(jù)左半部分。</div>
<div class="box">這個 div 占據(jù)右半部分。</div>
</div>
</body>
</html>
Instanz ausführen ?

Klicken Sie auf die Schaltfl?che ?Instanz ausführen“, um die Online-Instanz anzuzeigen