CSS3 Box Sizing
Die CSS3 box-sizing - Eigenschaft ermöglicht es uns , die Polsterung und Grenze in eines Elements die Breite und Höhe aufzunehmen.
Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Eigenschaft vollständig unterstützt.
Zahlen , gefolgt von -webkit- oder -moz- die erste Version an , die mit einem Präfix gearbeitet.
| Eigentum | |||||
|---|---|---|---|---|---|
| box-sizing | 10.0 4.0 -webkit- |
8.0 | 29.0 2.0 -moz- |
5.1 3.1 -webkit- |
9.5 |
Ohne die CSS3 box-sizing Immobilie
In der Standardeinstellung ist die Breite und Höhe eines Elements wie folgt berechnet:
Breite + Polsterung + border = tatsächliche Breite eines Elements
Höhe + Polsterung + border = tatsächliche Höhe eines Elements
Das bedeutet: Wenn Sie die Breite / Höhe eines Elements gesetzt, oft das Element erscheinen größer, als Sie eingestellt haben (weil die Grenze und Polsterung des Elements auf das Element des angegebenen Breite / Höhe hinzugefügt werden).
Die folgende Abbildung zeigt zwei <div> Elemente mit der gleichen angegebenen Breite und Höhe:
Die beiden <div> Elemente oberhalb Ende mit unterschiedlichen Größen in der Folge nach oben (weil div2 hat eine Polsterung angegeben):
Beispiel
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
} Versuch es selber " Also, für eine lange Zeit Web-Entwickler haben eine geringere Breite Wert angegeben als sie wollten, weil sie die Polsterung und Grenzen subtrahieren musste.
Mit CSS3, die box-sizing löst Eigenschaft dieses Problem.
Mit dem CSS3 box-sizing Immobilie
Die CSS3 box-sizing - Eigenschaft ermöglicht es uns , die Polsterung und Grenze in eines Elements die Breite und Höhe aufzunehmen.
Wenn Sie die Option box-sizing: border-box; auf einem Element Polsterung und Grenze sind in der Breite und Höhe enthalten:
Hier ist das gleiche Beispiel wie oben, mit box-sizing: border-box; hinzugefügt beiden <div> Elemente:
Beispiel
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
} Versuch es selber " Da das Ergebnis der Verwendung des box-sizing: border-box; ist so viel besser, wollen viele Entwickler alle Elemente auf ihren Seiten auf diese Weise zu arbeiten.
Der Code stellt sicher, unter der alle Elemente Größe in diesem intuitive Art und Weise sind. Viele Browser verwenden bereits box-sizing: border-box; für viele Formularelemente (aber nicht alle - deshalb Ein- und Textbereiche unterschiedlich aussehen auf Breite: 100%;).
Wendet man dies auf alle Elemente ist sicher und weise: