CSS3 Kastengröße
CSS3 box-sizing Eigenschaft , um die Breite zu setzen und Höhenattribute enthält Polsterung (padding) und der Grenze (Grenze).
Browser-Unterstützung
Die Zahlen in der Tabelle stellen die erste Browser die Eigenschaft Versionsnummer zu unterstützen.
Unmittelbar nach Ende der Browser -webkit- Nummer oder -moz- angegebenen Präfix.
| Immobilien | |||||
|---|---|---|---|---|---|
| Box-Sizing | 10.0 4.0 -webkit- | 8.0 | 29.0 2.0 -moz- | 5.1 3.1 -webkit- | 9.5 |
Verwenden Sie die CSS3 nicht Box-Sizing-Eigenschaft
Standardmäßig ist die Breite und die Art und Weise High-End-Computing-Element wie folgt:
Breite (Breite) + Polsterung (padding) + Grenze (Grenze) = tatsächliche Breite Elemente
Höhe (Höhe) + Polsterung (padding) + Grenze (Grenze) = tatsächliche Höhe des Elements
Das bedeutet, dass, wenn wir des Elements Breite / Höhe einstellen, die Anzeigehöhe des Elements und Breite größer wäre (weil der Grenzelement mit Polsterung Breite / Höhe in berechnen).
Diese zwei <div> Element, obwohl die Breite und Höhe-Einstellungen die gleichen, aber die Größe der realen Show inkonsequent, weil div2 angegebenen padding:
Beispiele
width: 300px;
Höhe: 100px;
border: 1px solid blau;
}
.div2 {
width: 300px;
Höhe: 100px;
padding: 50px;
border: 1px solid red;
}
Versuchen »
Wenn Sie diese Methode verwenden, um die kleineren Feld zu bekommen und enthält innerhalb der Ränder haben Sie die Grenze zu berücksichtigen und innerhalb der Randbreite.
Die CSS3 box-sizing Eigenschaft eine gute Lösung für dieses Problem.
Verwenden Sie CSS3 Box-Sizing-Eigenschaft
CSS3 box-sizing Attribut enthält Polsterung (padding) und der Grenze (Grenze) in Breite und Höhe eines Elements.
Wenn Sie setzen auf das Element box-sizing: border-box; die Polsterung (padding) und der Grenze (Grenze) ist auch in der Breite und der Höhe enthalten:
Hier sind zwei <div> Element hinzugefügt wird box-sizing: border-box; Eigenschaften eines einfachen Beispiels.
Beispiele
width: 300px;
Höhe: 100px;
border: 1px solid blau;
Box-Sizing: border-Box;
}
.div2 {
width: 300px;
Höhe: 100px;
padding: 50px;
border: 1px solid red;
Box-Sizing: border-Box;
}
Versuchen »
Geht man von den Ergebnissen der box-sizing: border-box; bessere Ergebnisse, es ist auch eine Menge Entwickler benötigen.
Der folgende Code kann alle Elemente in einer intuitiven Weise machen Größe angezeigt werden soll. Viele Browser unterstützen bereits box-sizing: border-box; (aber nicht alle - weshalb die Eingabe und Textelemente gesetzt Breite: 100%; die Breite der Post ist nicht das Gleiche).
Alle Elemente Box-Sizing verwendet, wird mehr empfohlen: