Eines der wichtigsten Werkzeuge eines Webentwicklers ist CSS, mit dem Sie das Aussehen und die Struktur einer Webseite steuern können. Wenn es darum geht, die Breite und Höhe von Elementen festzulegen, besteht oft ein Problem darin, die Berechnungen verschiedener Parameter zu verstehen. Wenn wir also die Breite und Höhe eines Elements mit den CSS-Eigenschaften width und height festlegen, geben wir normalerweise nur den Inhalt dieses Elements an und berücksichtigen keine Einrückungen, Rahmen und inneren Füllungen.
Es gibt jedoch eine Möglichkeit, dieses Problem mit der CSS-Eigenschaft box-sizing: border-box zu umgehen. Mit dieser Eigenschaft können Sie die Breite und Höhe eines Elements zusammen mit Einrückungen und Rahmen und nicht nur dem Inhalt angeben. Mit anderen Worten, wenn wir Box-sizing installieren: border-box für ein Element enthalten alle für Breite und Höhe festgelegten Werte Einzug und Rahmen, wodurch die Berechnungen vereinfacht und Größenunterschiede vermieden werden.
Das Funktionsprinzip von box-sizing: Border-box ist extrem einfach und logisch. Wenn wir die Breite und Höhe des Elements festlegen und Box-sizing angeben: border-box, der Browser berücksichtigt automatisch die Einrückung und den Rahmen bei der Größenberechnung. Das heißt, wenn ein Element beispielsweise einen linken und rechten Einzug von 10 Pixeln hat, der Rahmen 2 Pixel beträgt und die angegebene Breite 200 Pixel beträgt, beträgt die tatsächliche Größe des Elements 200 Pixel und nicht 224 Pixel, wie bei der Verwendung der box-sizing: content-box-Eigenschaft. Dies vermeidet Verwirrung und zusätzliche Berechnungen beim Erstellen und Bearbeiten von Elementen auf einer Webseite.
Wie funktioniert box-sizing: border-box?
Mit der box-sizing: border-box-Eigenschaft in CSS können Sie die Berechnung der Breite und Höhe eines Elements, einschließlich des Padding und der Grenzen, durch den Inhalt ändern. Dies bedeutet, dass die Breite und Höhe des Elements einschließlich der Abmessungen der Padding und der Rahmen festgelegt werden.
Standardmäßig werden bei box-sizing: content-box die Breite und Höhe des Elements nur auf der Grundlage der Inhaltsgrößen berechnet, ohne Padding und Grenzen zu berücksichtigen. Dies kann zu Problemen beim Platzieren von Elementen in Containern führen, insbesondere bei der Verwendung eines Prozentwerts für Breite oder Höhe.
Wenn der Wert der Box-sizing-Eigenschaft auf border-box festgelegt ist, enthalten die Breite und Höhe des Elements die Abmessungen des Padding und der Grenzen, sodass die Größe des Inhalts automatisch reduziert wird, um den festgelegten Werten zu entsprechen.
Die folgende Tabelle zeigt den Unterschied zwischen Inhalts-, Padding- und Elementgrenzen-Werten, wenn die Box-sizing-Eigenschaft angewendet wird:
| box-sizing: content-box | box-sizing: border-box |
|---|---|
| Breite = Inhalt + Padding + Grenze | Breite = Inhalt |
| Höhe = Inhalt + Padding + Grenze | Höhe = Inhalt |
Die box-sizing: border-box-Eigenschaft kann beim Erstellen eines ansprechenden Designs nützlich sein, wenn die Größe der Elemente genau festgelegt werden muss, damit sie sich proportional ändern, wenn Sie die Größe des Browserfensters oder des Geräts ändern.
Verwenden von Box-sizing: border-box vereinfacht auch das Berechnen und Festlegen von Elementgrößen, insbesondere beim Erstellen komplexer Layouts mit vielen verschachtelten Elementen.
Warum brauchen Sie eine Box-sizing: border-box?
Standardmäßig berechnen Webbrowser die Größe eines Elements, indem sie der angegebenen Breite oder Höhe einen Einrückungs- und Randwert (Padding und Border) hinzufügen. Dies bedeutet, dass die tatsächliche Breite des Elements bei einer Breite von 200 Pixeln und 20 Pixeln des inneren Einrückens und 2 Pixeln des Rahmens 222 Pixel beträgt (200 + 20 + 2 ).
Wenn die box-sizing: border-box-Eigenschaft verwendet wird, wird die Größe des Elements jedoch anders berechnet. In diesem Fall enthält die angegebene Breite oder Höhe des Elements bereits Einrückungs- und Umgrenzungswerte. Dies bedeutet, dass die tatsächliche Breite des Elements auf 200 Pixel festgelegt ist, einschließlich der Einrückung und des Rahmens, wenn die Breite des Elements auf 200 Pixel festgelegt ist.
Dieser Ansatz zur Berechnung der Elementgröße hat seine Vorteile. Erstens ermöglicht es Ihnen, die Größe der Elemente einer Webseite genauer zu steuern. Zweitens, wenn box-sizing verwendet wird: border-box, interagieren die Elemente vorhersehbarer miteinander. Wenn beispielsweise zwei benachbarte Elemente gleiche Breiten aufweisen, belegen sie unabhängig von den inneren Einrüstungen und Grenzen die gleiche Menge an Platz. Dies ist besonders wichtig für die Erstellung flexibler und anpassungsfähiger Layouts.
Vorteile der Verwendung von Box-Sizing: border-box
Der Hauptvorteil der Verwendung von Box-Sizing: die Border-Box ermöglicht es Ihnen, die Größe von Elementen flexibler zu steuern und Grenzen und Einrückungen bei der Berechnung der Breite und Höhe eines Elements zu berücksichtigen.
Wenn die Box-Sizing-Eigenschaft angewendet wird: border-box, die Abmessungen des Elements enthalten bereits seine Grenzen und den inneren Inhalt, sodass Sie seine Abmessungen genauer kontrollieren und unvorhergesehene Verschiebungen und Überlappungen vermeiden können.
Ein weiterer wichtiger Vorteil von box-sizing: Border-box besteht darin, die Berechnung der Breite und Höhe von Elementen bei Verwendung von Prozentwerten zu vereinfachen. Statt komplexer Mathematik müssen Sie einfach einen Prozentwert angeben und sich keine Gedanken darüber machen, dass diesem Wert Grenzen und Einrückungen hinzugefügt werden, was die Erstellung von responsivem Design und die Verwaltung der Mustergrößen erheblich vereinfacht.
Außerdem Box-Sizing: border-box kann die Leistung verbessern, da der Browser die Größe eines Elements nur einmal berechnen muss, anstatt sie bei jeder Änderung der Grenzen und des internen Inhalts neu zu berechnen.
| Vorteile der Verwendung von Box-Sizing: border-box |
|---|
| Berechnung der Größe eines Elements unter Berücksichtigung der Grenzen und des internen Inhalts |
| Flexible Steuerung der Elementgrößen |
| Vereinfachung der Berechnung von Breite und Höhe bei Verwendung von Prozentwerten |
| Leistungsverbesserung |
Wie ändere ich box-sizing: border-box in CSS?
Wenn Sie den Wert der Box-sizing-Eigenschaft in CSS in border-box ändern möchten, müssen Sie diese Eigenschaft auf das entsprechende Element oder die entsprechende Elementklasse auf Ihrer Webseite anwenden. Es gibt mehrere Möglichkeiten, dies zu tun:
| Art | Beispielcode |
|---|---|
| 1. Verwenden von Inline-Stilen | Inhalt des Elements |
| 2. Verwenden einer Klasse | .my-element Inhalt des Elements |
| 3. Verwendung von ID | #my-element Inhalt des Elements |
Wählen Sie je nach Ihrer Situation die am besten geeignete Methode aus und wenden Sie die Eigenschaft box-sizing: border-box auf die gewünschten Elemente Ihrer Webseite an. Auf diese Weise ändern Sie das Standardverhalten der Blockelemente und legen einen Border-Box-Wert fest, mit dem Sie die Berechnung der Größe der Elemente einer Webseite flexibler steuern können.
Wie wirkt sich box-sizing: border-box auf die Größe von Elementen aus?
Eigenschaft box-sizing: border-box sehr nützlich beim Arbeiten mit Elementgrößen in CSS. Es ermöglicht Ihnen, die Größe von Elementen, einschließlich ihrer Grenzen und Einrückungen, genau zu steuern.
Wenn wir die Breite und Höhe eines Elements in CSS angeben, gelten diese Werte standardmäßig nur für den Inhalt des Elements und enthalten keine Ränder und Einrückungen. Dies kann zu einem Problem werden, insbesondere wenn wir ein Gitter aus Elementen mit fester Breite und Einzug erstellen möchten.
Wenn wir eine Eigenschaft für ein Element festlegen box-sizing: border-box. Die Abmessungen des Elements berücksichtigen seine Grenzen und Einrückungen. Dies bedeutet, dass die Breite und Höhe des Elements die tatsächlichen Abmessungen des Elements sein werden, wobei seine Grenzen und Einrückungen berücksichtigt werden.
Wenn wir beispielsweise ein Element auf eine Breite von 200px und ein Padding von 10px setzen, ohne die Eigenschaft zu verwenden box-sizing: border-box. die tatsächliche Breite des Elements wäre 220px (200px + 10px links + 10px rechts). Wenn wir jedoch verwenden box-sizing: border-box dann wird das Element eine genau definierte Breite von 200px haben und das Padding wird innerhalb des Elements berücksichtigt.
Daher ist die Verwendung der Eigenschaft box-sizing: border-box ermöglicht es uns, die Größe von Elementen genauer zu steuern und Gitter aus Elementen mit fester Breite und Einzug zu erstellen. Es vereinfacht auch das Arbeiten mit festen Größen in mobilen Versionen von Websites, bei denen begrenzter Speicherplatz berücksichtigt werden muss.
Es kann auch für andere Elemente, z. B. bei der Arbeit mit Tabellen oder Bildern, nützlich sein, wenn Sie die Abmessungen genau steuern möchten, um die Größe der Elemente zu berücksichtigen.
Beispiele für die Verwendung von box-sizing: border-box
Anstatt die Breite des Blocks zu berechnen, können wir die Eigenschaft box-sizing: border-box auf diesen Block anwenden, indem wir die Breite der Grenzen und Einrückungen berücksichtigen.
Zum Beispiel haben wir einen Block mit einer festen Breite von 300 Pixeln und einem Rahmen von 10 Pixeln. Ohne Box-Sizing zu verwenden: border-box, die Breite des Blocks beträgt 320 Pixel (300 Pixel + 10 Pixel auf jeder Seite). Wenn wir jedoch die Eigenschaft box-sizing: border-box anwenden, beträgt die Breite des Blocks nur 300 Pixel, da die Grenzen innerhalb des Blocks eingeschlossen werden.
Dies ist sehr praktisch beim Erstellen von Gittern, da wir die Breite des Blocks in Prozent oder mithilfe von Vw-Maßeinheiten (Viewport width) festlegen können, und innerhalb dieses Blocks können wir Grenzen und Einrückungen hinzufügen, ohne dass sich die Breite des Blocks ändert.
Das zweite Beispiel für die Verwendung von Box-Sizing: border-box ist die Schaffung von Elementen mit fester Höhe und Padding.
Oft haben wir bei der Verwendung von Padding eine Situation, in der das Padding zur Höhe des Elements hinzugefügt wird, was zu einem unerwünschten Blocküberlauf führen kann.
Wenn wir die Box-Sizing-Eigenschaft anwenden: border-box zu diesem Element wird das Padding innerhalb des Elements aktiviert, und die Blockhöhe bleibt fixiert, wodurch ein Überlaufen des Blocks vermieden wird.
Wie verwende ich Box-sizing: border-box für Elemente auf einer Flexbox?
Bei Verwendung der Box-sizing-Eigenschaft: die Größe des Elements umfasst Breite und Höhe sowie interne Einrückungen (Padding) und einen Rahmen (Border), wodurch die Größe der Elemente genauer kontrolliert und unvorhergesehene Verschiebungen vermieden werden können.
Wenn Sie ein Flexbox-Raster anwenden, um die Position von Elementen zu steuern, verwenden Sie box-sizing: eine Border-Box kann besonders praktisch sein, da der innere Einzug (Padding) und der Rahmen (border) in die Breite und Höhe des Elements einbezogen werden, anstatt sie hinzuzufügen.
Wenn Sie beispielsweise eine Reihe von Elementen haben, die gleichmäßig horizontal verteilt sein müssen, können Sie die Flex-Eigenschaft für sie festlegen: 1, um sicherzustellen, dass sie den gesamten verfügbaren Platz auf der Flexbox-Linie einnehmen. Mit der Eigenschaft box-sizing: border-box können Sie diesen Elementen dann einen inneren Einzug und Rahmen hinzufügen, ihre Gesamtbreite beträgt immer 100% und der zusätzliche Platz wird gleichmäßig zwischen ihnen verteilt.
Diese Kombination von Eigenschaften ermöglicht es Ihnen, die Größe von Elementen flexibler zu steuern und adaptive Layouts auf Flexbox zu erstellen.
