Box Sizing

Die Eigenschaft box-sizing kann den Aufbau von CSS-Layouts einfacher und viel intuitiver machen. Sie ist für Entwickler ein so großer Vorteil, dass wir hier bei CSS-Tricks im Februar den International Box-Sizing Awareness Day feiern.

Aber, wie ist es so hilfreich und beliebt, dass es seinen eigenen Internet-Feiertag verdient? Zeit für ein wenig CSS-Geschichte.

Box Model Geschichte

Seit Anbeginn von CSS funktioniert das Box-Modell standardmäßig so

breite + padding + border = tatsächliche sichtbare/gerenderte Breite des Rahmens eines Elements

höhe + padding + border = tatsächliche sichtbare/gerenderte Höhe des Rahmens eines Elements

Dies kann etwas kontraintuitiv sein, da die von Ihnen für ein Element festgelegte Breite und Höhe sofort verloren gehen, sobald Sie beginnen, Padding und Rahmen zum Element hinzuzufügen.

In den alten Tagen des Webdesigns verhielten sich frühe Versionen von Internet Explorer (<= IE6) im "Quirks Mode" anders mit dem Box-Modell. Das "Quirks"-Box-Modell funktionierte so: breite = tatsächliche sichtbare/gerenderte breite des Rahmens eines Elements höhe = tatsächliche sichtbare/gerenderte höhe des Rahmens eines Elements Die Rahmen- und Padding-Werte wurden in den Rahmen des Elements verschoben und schnitten in die Breite/Höhe des Rahmens ein, anstatt ihn zu erweitern.

Manche Leute bevorzugten diese "quirky" Interpretation des Box-Modells und hielten sie für intuitiver. Das ist ein valider Punkt. Dass die tatsächliche sichtbare Breite eines Rahmens anders ausfällt als deklariert, ist ein wenig verwirrend.

Aber zu Zeiten des Fixed-Width-Designs war es nicht besonders kompliziert, mit dem Standard-Box-Modell zu arbeiten, sobald man es verstanden hatte. Man konnte ein wenig rechnen, um herauszufinden, wie viele Pixel man von der deklarierten Breite oder Höhe eines Elements abziehen musste, um sein Padding und seinen Rahmen zu berücksichtigen. Das Problem für heutige Entwickler ist, dass diese absoluten Pixelmaße sich nicht auf responsives Design übertragen lassen, so dass die gleiche Rechnung nicht mehr gilt.

Als responsives Design (oder, wie es einst hieß, "flüssiges" oder "liquides" Layout) an Popularität gewann, wünschten sich Entwickler und Designer eine Aktualisierung des Box-Modells. Der großartige Designer Jon Hicks, bekannt für seine exzellenten Designs mit flüssiger Breite, sagte dazu in der CSS Wishlist, die wir 2008 zusammengestellt haben:

Ich würde mir ein anderes Box-Modell wünschen! Ich finde es bizarr, dass Padding und Border die Breite eines Objekts hinzufügen, und ich würde mir wünschen, einem Textbereich wie einem Textfeld 100% Breite und 3px Padding geben zu können, ohne sich Gedanken darüber machen zu müssen, was es mit dem Layout macht. Vielleicht so etwas wie padding-inside als neuen Selektor?

In diesem Sinne wünsche ich mir auch, dass ich eine 100% Breite für ein Element festlegen könnte, abzüglich einer festgelegten festen Breite. Auch das ist sehr nützlich bei der Erstellung von flüssigen Designs mit Formularelementen!

Heutiges box-sizing

Diese Wünsche wurden erfüllt, als die Eigenschaft box-sizing in CSS3 eingeführt wurde. Obwohl box-sizing drei mögliche Werte hat (content-box, padding-box und border-box), ist der beliebteste Wert border-box.

Heute verwenden die aktuellen Versionen aller Browser das ursprüngliche Box-Modell "Breite oder Höhe + Padding + Border = tatsächliche Breite oder Höhe". Mit box-sizing: border-box; können wir das Box-Modell in die einst "quirky" Weise ändern, bei der die spezifizierte Breite und Höhe eines Elements nicht durch Padding oder Rahmen beeinflusst werden. Dies hat sich im responsiven Design als so nützlich erwiesen, dass es seinen Weg in Reset-Styles gefunden hat.

An dieser Stelle fragen Sie sich vielleicht: "Ist es möglich, dass Old IE etwas richtig gemacht hat?" Viele Leute denken das.

Demo

Diese Demo zeigt, wie border-box responsive Layouts überschaubarer machen kann. Die Breite des übergeordneten divs beträgt 50%, und es hat 3 Kinder mit unterschiedlichen Breiten, Padding und Rändern. Klicken Sie auf den border-box-Button, um alle Kinder an den richtigen Platz innerhalb des Elternteils zu bringen.

Siehe den Pen Box Sizing Layout Demo von CSS-Tricks (@css-tricks) auf CodePen.

Gute, bessere und (wahrscheinlich) beste box-sizing Reset-Methoden

Das "alte" border-box Reset

Das früheste box-sizing: border-box; Reset sah so aus

* {
  box-sizing: border-box;
}

Das funktioniert ziemlich gut, aber es lässt Pseudoelemente aus, was zu einigen unerwarteten Ergebnissen führen kann. Ein überarbeitetes Reset, das Pseudoelemente abdeckt, entstand schnell

Universelles Box-Sizing

*, *:before, *:after {
  box-sizing: border-box;
}

Diese Methode wählte auch Pseudoelemente aus, was den normalisierenden Effekt von border-box verbesserte. Aber der Selektor * macht es Entwicklern schwer, content-box oder padding-box an anderer Stelle im CSS zu verwenden. Was uns zum aktuellen Favoriten für Best Practices bringt

Universelles Box-Sizing mit Vererbung

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

Dieses Reset bietet mehr Flexibilität als seine Vorgänger – Sie können content-box oder padding-box (wo unterstützt) nach Belieben verwenden, ohne sich Gedanken darüber machen zu müssen, dass ein universeller Selektor Ihr CSS überschreibt. Wir haben diese Technik und ihre Gründe in "Inheriting box-sizing Probably Slightly Better Best Practice" ausführlicher behandelt. Ein potenzieller Kritikpunkt ist, dass box-sizing normalerweise nicht vererbt wird, es ist also ein spezialisiertes Verhalten, nicht ganz dasselbe wie etwas, das man normalerweise in ein Reset aufnehmen würde.

Hersteller-Präfixe

Jeder aktuelle Browser unterstützt box-sizing: border-box; ohne Präfix, daher schwindet die Notwendigkeit für Hersteller-Präfixe. Aber wenn Sie ältere Versionen von Safari (< 5.1), Chrome (< 10) und Firefox (< 29) unterstützen müssen, sollten Sie die Präfixe -webkit und -moz wie folgt einfügen

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
  }

Bekannte Probleme

box-sizing: border-box; wird in den aktuellen Versionen aller wichtigen Browser unterstützt. Das weniger gebräuchliche padding-box wird derzeit nur in Firefox unterstützt. Umfassendere Informationen zur Browserunterstützung finden Sie in unserem Almanacheintrag zu box-sizing.

Es gibt einige Probleme mit älteren Versionen von Internet Explorer (8 und älter). IE 8 erkennt border-box nicht auf Elementen mit min/max-width oder min/max-height (dies beeinträchtigte früher auch Firefox, wurde aber 2012 behoben). IE 7 und älter erkennen box-sizing überhaupt nicht, aber es gibt ein Polyfill, das helfen kann.