Eine kurze Diskussion des interessanten Boxmodells der CSS3-Boxgrößeneigenschaft

Jeder muss die Zusammensetzung des Boxmodells von innen nach außen kennen: Inhalt, Polsterung, Rahmen, Ränder.

Es gibt zwei Standard-Boxmodelle, eines ist das Standardmodell und das andere ist das IE-Modell.

Aus den beiden obigen Bildern lässt sich leicht erkennen, dass im Standardmodell die Breite und Höhe des Boxmodells lediglich der Breite und Höhe des Inhalts entsprechen.

Im IE-Modell entspricht die Breite und Höhe des Boxmodells der Gesamtbreite und -höhe von Inhalt + Polsterung + Rahmen.

So legen Sie zwei Modelle in CSS fest

Hierbei kommt die CSS3-Eigenschaft box-sizing (Standardwert: content-box) zum Einsatz.

/* Standardmodell */ 
 Boxgröße: Inhaltsbox;
  /*IE-Modell*/
 Boxgröße: Rahmenbox;

Inhaltsbox: Dies ist das in CSS 2.1 angegebene Verhalten für Breite und Höhe. Die Angabe der Breite und Höhe eines Elements (Min.-/Max.-Eigenschaften) gilt für die Breite und Höhe der Box. Die Polsterung und der Rand eines Elements werden bis auf die angegebene Breite und Höhe ausgelegt und gezeichnet

Rahmenbox: Geben Sie Breite und Höhe (Minimal-/Maximaleigenschaften) an, um die Rahmenbox des Elements zu bestimmen. Das heißt, dass die Angabe der Breite und Höhe eines Elements auch die Angabe von Polsterung und Rändern umfasst. Die Inhaltsbreite und -höhe werden berechnet, indem die Breite des Rahmens und der Polsterung auf beiden Seiten von den angegebenen Eigenschaften „Breite“ und „Höhe“ abgezogen wird.

Testreferenzfälle

Der ideale Effekt und Code sind wie folgt:

.input { Breite: 146px; Höhe: 36px; Zeilenhöhe: 36px; Hintergrund: transparent; Rahmen: 2px durchgezogen #0D349A; Farbe: #bdbdbd; Polsterung links: 10px; Polsterung rechts: 30px; Schriftgröße: 14px;
box-sizing:content-box; (Standard optional)} 

Bei der Anwendung in einem Projekt mit dem Bootstrap-Framework habe ich festgestellt, dass die Standard-Boxgröße „Border-Box“ im Stil „bootstrap.min.css“ die Breite und Höhe des Suchfelds beeinträchtigt.

* { -webkit-box-sizing: Rahmenbox; 
-moz-box-sizing: Rahmenbox;
 Boxgröße: Rahmenbox;}

Diese Eigenschaft bewirkt, dass die Seite folgendermaßen aussieht:

.input { Breite: 146px; Höhe:
 36px;
 Zeilenhöhe: 36px; 
Hintergrund: transparent; 
Rand: 2px durchgezogen #0D349A;
 Farbe: #bdbdbd; Polsterung links: 10px;
 Polsterung rechts: 30px; 
Schriftgröße: 14px; Boxgröße: Rahmenbox;} 

Wenn Sie jetzt den idealen Effekt erzielen möchten, müssen Sie den Stil wie folgt anpassen:

.Eingabe { Breite: 190px;
 Höhe: 40px; Zeilenhöhe: 
40px; Hintergrund: transparent; 
Rand: 2px durchgezogen #0D349A;
 Farbe: #bdbdbd; Polsterung links: 10px; 
Polsterung rechts: 30px;
 Schriftgröße: 14px; 
Boxgröße: Rahmenbox;}

PS-Tipps: Wenn die Breite eines Containers als „width:100%;“ definiert ist und eine Polsterung oder ein Rahmen hinzugefügt wird, läuft dieser über den übergeordneten Container hinaus und wird nach außen ausgedehnt.

Wenn Sie diesen Stil verwenden und box-sizing: border-box; angeben, laufen die Polsterung und der Rand nicht mehr über, sondern schrumpfen nach innen. Dieser Effekt wirkt sehr praktisch.

Zusammenfassen

Das Obige ist die Einführung des Herausgebers in das interessante Boxmodell des CSS3-Boxgrößenattributs. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten!