Vorher begegnete ich verschiedene seltsame Fallstricke, als ich Bootstrap lernte. Wenn ich meine vorbereitende Arbeit vor dem Lernen von Bootstrap erledige, kann ich einige Fallstricke in größerem oder geringem Maße vermeiden. Im Folgenden wird der Editor Sie in das Wissen des Border-Box-Attributs vorgestellt.
In der eigenen CSS -Datei von Boostrap: boostrap.css gibt es ein Stück Code:
* {-webkit-Box-Größe: Border-Box; -moz-Box-Größe: Border-Box; Kastengrößen: Border-Box; }Dies bedeutet, dass diese Eigenschaft beim Schreiben von Code überall sein wird. Also, was zum Teufel ist diese Boxgröße: Boder-Box? Schauen wir uns zunächst einen sehr gewöhnlichen Code an:
<div> <div> </div> </div>
Führen Sie den Code aus, um herauszufinden: Die äußere Höhe beträgt 702px, die innere Breite 500px und die Höhe 500px; Jeder sollte hier keine Zweifel haben. Schauen wir uns jetzt einen anderen Code an:
* {-webkit-Box-Größe: Border-Box; -moz-Box-Größe: Border-Box; Kastengrößen: Border-Box; } <div> <div> </div> </div>Dieser Code ist tatsächlich die Hinzufügung der ersten beiden Codes. Es kann einfach verstanden werden, dass Sie jetzt mit dem Schreiben von Code in Boostraps Framework beginnen. Das Ergebnis des laufenden Codes ist: Die Breite der Außenseite beträgt 500px und die Höhe des Innens beträgt 298px;
Der Grund für dieses Ergebnis ist: Kastengrößen: Border-Box, damit die Breite und Höhe der Elemente nicht durch Polsterung und Rand betroffen sind. Zum Beispiel hat im obigen Code, auch wenn das Außenpolster und Rand und Grenze die Breite und Höhe des Außenbereichs beeinflussen, und die Breite und Höhe des Außenbereichs beträgt immer noch 500px. Aber wohin gingen Polsterung und Grenze? Antwort: Gehen Sie hinein! Öffnen Sie das Debugging -Tool des Browsers und sehen Sie sich die Stildetails der Außenseite an:
Wir können deutlich sehen, dass Polsterung und Grenze beide gültig sind, aber sie belegen den inneren Raum der Außenseite. Seit der Polsterung: 100px nimmt die 200px -Breite und den Höhenwert des Außenbereichs ein, und die Grenze nimmt die 2px -Breite und den Höhenwert des Innens ein, sodass das Innere nur die 298px -Breite und den Höhenwert des Außenhöhe erhalten kann.
Wenn Sie Erfahrung in der Webentwicklung unter IE haben, werden Sie feststellen, dass die Kastengröße: Border-Box der seltsame Modus der unteren Version des IE ist.
Das oben genannte ist das relevante Wissen über die vom Herausgeber vorgestellte Borderbox -Vorbereitung von Boostrap für Border Box. Hast du es gelernt? Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird allen rechtzeitig antworten. Gleichzeitig möchte ich allen für ihre Unterstützung für die Wulin.com -Website danken!
Unten finden Sie eine kurze Einführung in das Verständnis der Grenzbox der Boxgröße
-Webkit-Box-Größe: Border-Box; Dann umfasst die Breite und die Höhe des DIV Grenzen und Polsterung
<! DocType html> <html> <kopf> <titels> Box-Größe </title> <style type = "text/css">. Border-Box; "> Special </div> </body> </html>