Warum wurde Bootstrap 3 auf „box-sizing: border-box' umgestellt?

Entschlüsselung des Wechsels zur Border-Box in Bootstrap 3

Bootstrap 3 führte eine spürbare Änderung mit der Einbeziehung der Box-Größe ein: Border-Box für alle Elemente. Diese Abweichung vom Standardwert für die Inhaltsbox hat Fragen zu ihrer Begründung aufgeworfen.

Während des Migrationsprozesses von Bootstrap 2.3.2 auf 3.0.0 beobachteten Entwickler erhebliche Dimensionsunterschiede, die auf diese Änderung zurückzuführen sind. Die folgende CSS-Regel in bootstrap.css weist auf den Kern dieser Änderung hin:

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

Auswirkungen der Border-Box auf die Abmessungen

Beim traditionellen Content-Box-Modell die Breite und Höhe eines Elements Berücksichtigen Sie nur den Inhalt, ohne Innenabstand und Rand. Dies würde zu Problemen bei der Berechnung der Gesamtbreite oder -höhe führen, da diese über die angegebenen Werte hinausgehen würden.

Im Gegensatz dazu berücksichtigt border-box sowohl den Innenabstand als auch den Rand in der Breiten- und Höhenberechnung. Dieses vereinfachte Modell stellt sicher, dass die endgültige gerenderte Boxgröße unabhängig von der Polsterung oder der Randgröße genau an der angegebenen Breite und Höhe ausgerichtet ist.

Die Rolle der Border-Box im Rastersystem von Bootstrap

Während die „move to border-box“ wirkt sich auf alle Elemente aus, besonders wirkungsvoll ist es im Fluid-Grid-System von Bootstrap 3. In Fluid Grids werden Spalten als Prozentsatz der Gesamtbreite des Containers definiert, sodass sie reaktionsfähig skaliert werden können.

Beim Content-Box-Modell würde die Berechnung der Spaltengrößen die Berücksichtigung des Stegs mit fester Breite auf beiden Seiten erfordern . Diese Komplexität wird mit Border-Box beseitigt. Die deklarierte Breite einer Spalte umfasst jetzt sowohl den Rand als auch den Abstand und bietet so eine konsistente und intuitive Möglichkeit zur Größenbestimmung.

Branchenakzeptanz und Vorteile

Über die Vorteile des Rastersystems von Bootstrap hinaus ist die Einführung von Box-Größe: Border-Box erfreut sich in der Webentwicklung zunehmender Beliebtheit. Es fördert konsistentes Verhalten in allen Browsern und bietet einen intuitiven Ansatz für Layout und Größe.

In den Versionshinweisen für Bootstrap 3 wird ausdrücklich die Absicht hinter dieser Änderung dargelegt: „Standardmäßig besseres Box-Modell. Alles in Bootstrap erhält Box-Größe.“ : Rahmenfeld, das einfachere Größenoptionen und ein verbessertes Rastersystem ermöglicht.

Zusätzlich Ressourcen:

• [Browser-Unterstützung für Border-Box](http://css-tricks.com/box-sizing/)
• [Vorteile von Border-Box](http ://www.paulirish.com/2012/box-sizing-border-box-ftw/)

Das obige ist der detaillierte Inhalt vonWarum wurde Bootstrap 3 auf „box-sizing: border-box' umgestellt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!