Document Box Model Zweiter Test 16. CSS Box Model Control. Minimale und maximale Elementhöhe

Wenn Sie mit der Höhe des Blocks arbeiten, sollten Sie noch Folgendes beachten: Wenn der Inhalt die Größe des Blocks überschreitet, geht er darüber hinaus. Hier ist ein Beispiel für einen solchen Code:

Das Beispiel zeigt, dass der Text über die Grenzen des Blocks hinausgegangen ist.

Dies zu vermeiden ist sehr einfach - legen Sie einfach nicht die Höhe des Inhalts fest (height ). Manchmal müssen Sie jedoch die Höhe des Blocks genau definieren. In diesem Fall können Sie die Overflow-Eigenschaft mit dem Wert auto verwenden. Diese Eigenschaft erstellt eine Bildlaufleiste im Block, wenn die Inhaltsgröße die Blockgröße überschreitet.

Fügen wir die Overflow-Eigenschaft mit dem Wert auto zum Stil von Beispiel #9 hinzu und das Ergebnis sieht so aus:

Die Overflow-Eigenschaft hat einen weiteren Wert, der auch zum Anpassen der Höhe des Blocks verwendet werden kann - hidden. Dieser Wert blendet einfach alles aus, was nicht in die eingestellten Blockgrößen passt.

Minimale und maximale Elementbreite

In diesem Artikel ist es auch angebracht, sich an die Eigenschaften min-width und max-width zu erinnern, die die minimale bzw. maximale Breite eines Elements festlegen.

Die Eigenschaft min-width funktioniert folgendermaßen: Wenn der Benutzer die Größe des Browserfensters ändert, wird die Blockbreite nicht kleiner als das Minimum, in diesem Fall wird eine Bildlaufleiste angezeigt. Der Wert der Breite des Elements hängt von den Werten der Eigenschaften width , max-width und min-width ab.

Die Tabelle zeigt, wie Browser Blockbreiten berechnen, wenn sie diese Eigenschaften verwenden.

Die Eigenschaft max-width legt die maximale Breite eines Elements fest. Ein Beispiel für die Verwendung der Eigenschaft max-width:

Minimale und maximale Elementhöhe

Ebenso gibt es Eigenschaften zum Festlegen der minimalen und maximalen Höhe eines Elements: min-height und max-height .

Dieser Artikel behandelt einen sehr wichtigen Punkt beim Layout von Webseiten – das Box-Modell oder mit anderen Worten das Block-Layout-System für Websites.

Um die Essenz dieses Konzepts zu enthüllen, wenden wir uns den Spezifikationen zu W3C. Dieses Dokument besagt, dass ein Blockelement ein Rechteck ist, das für Dokumentbaum-Tags erstellt wird.

Einfach ausgedrückt werden die Tags innerhalb der Seite in Rechtecke umgewandelt, wenn sie auf dem Bildschirm angezeigt werden.

Blockelementstruktur

Die Boxmodellstruktur ist nicht besonders komplex.

Grob gesagt ähnelt es Verschachtelungspuppen aus Rechtecken: Das größte Rechteck ist der äußere Rand oder Einzug, gefolgt von der Umrandung des Blockelements selbst, dann den inneren Einzügen und dem Inhalt selbst.

Um dieses Problem besser zu veranschaulichen, sehen Sie sich die folgende Abbildung an:

Die Größe jeder Komponente wird mit dem entsprechenden CSS-Stil angepasst: Gewinnspanne– externe Felder, Grenze– die Grenzen des Elements selbst und Polsterung ist der Wert interner Felder.

Es ist auch erwähnenswert, dass die Menge an Rändern und Rändern für jede Seite unabhängig gesteuert werden kann, was in der folgenden Abbildung deutlich dargestellt wird:

Grundlegende Unterschiede zwischen Rand und Polsterung

Zunächst sollte eine klare Grenze zwischen den Begriffen Einzug und Einzug gezogen werden. Äußeres Padding bedeutet in diesem Sinne den Abstand zwischen den äußeren umgebenden Elementen und dem Rand des Blockelements selbst und das innere den Abstand vom Inhalt zum Rand.

Der nächste grundlegende Unterschied zwischen diesen Elementen besteht darin, dass sich bei der Zuweisung eines bestimmten Farbschemas zum Hintergrund die Farbe nur auf den Raum ausbreitet, der sich auf das Polsterelement bezieht.

Ein weiteres Unterscheidungsmerkmal dieser Elemente basiert auf der Berechnung der Gesamtbreite des Blockbauteils. Standardmäßig ist die Polsterung in dieser Breite enthalten, der Rand jedoch nicht. Dieser Umstand hängt vom verwendeten Blockmodell des Dokuments ab.

Sorten von Blockmodellen

Bis heute gibt es nur 2 verschiedene Modelle von Blocksystemen: traditionell, basierend auf den Funktionen von Internet Explorer 6 und allgemein, basierend auf den Grundprinzipien der W3C-Postulate. Letzteres wird von allen modernen Browsern verwendet.

Unterscheidungsmerkmal von Blockelementen aus verschiedenen Systemen

Es gibt einen einzigen Unterschied zwischen Blöcken in herkömmlichen und gebräuchlichen Systemen. Es basiert auf den unterschiedlichen Regeln zur Berechnung der Höhe und Breite des Blocks.

Gemäß der traditionellen Struktur des Blockelementesystems, gemäß den Regeln des Internet Explorers, umfassen die Höhen- und Breiteneigenschaften nicht nur die Abmessungen des Inhalts, sondern auch seine Ränder und Polsterung.

Das modernere Box-System, das sich an den Postulaten des W3C orientiert, berücksichtigt bei der Zuweisung der Breiten- und Höheneigenschaften jedoch nur den Inhalt. Ein optischer Unterschied ist in der folgenden Abbildung dargestellt:

Es ist sehr wichtig, diese Unterschiede zu berücksichtigen, wenn Sie eine neue Webressource erstellen.

Bestimmung der tatsächlichen Abmessungen von Elementen

Hoffentlich ist mit dem traditionellen Ansatz, einem Block eine Höhe und Breite zuzuweisen, alles sehr klar. Zum Beispiel, wenn ein Webmaster den folgenden Code in eine CSS-Datei schreibt:

Block ( Breite: 200px; Polsterung: 20px; )

Dies bedeutet, dass das Element mit der Blockklasse 200 Pixel breit ist, da der Inhalt selbst 180 Pixel belegt und die restlichen 20 Pixel für die Polsterung verwendet werden.

Der zweite Fall, der nicht zum traditionellen gehört, ist mit gewissen Schwierigkeiten verbunden. Sie treten auf, weil die Breiten- und Höheneigenschaften nur für den Inhalt gelten und die Blockgrößen daher nicht mit diesen Parametern übereinstimmen.

Genau deshalb Ein anständiger Layout-Designer muss wissen, wie die tatsächlichen Abmessungen eines Blockelements ermittelt werden. Beim Durcharbeiten dieses Punktes wird uns eine Abbildung helfen, die die Komponenten veranschaulicht, aus denen der Block besteht:

Daraus folgt, dass Sie, um beispielsweise die Höhe eines Blockelements zu bestimmen, die obere und untere Polsterung, die Ränder und die Inhaltshöhe hinzufügen müssen. Ähnliche Berechnungen werden bei der Bestimmung des Breitengrads des Elements durchgeführt, was in der folgenden Abbildung dargestellt ist:

Eine interessante Situation ergibt sich jedoch, wenn die Breite als Prozentsatz mit einem Rand ungleich Null und Auffüllung festgelegt wird. Dann gibt es natürlich einen Fehler in der Größe des Elements.

Deshalb versuchen erfahrene Webmaster, die prozentuale Angabe der Breite für Blocklayouts nach den W3C-Regeln so wenig wie möglich zu verwenden.

Zusammenfassen

Nachdem Sie sich mit diesem Problem befasst haben, können Sie viele Probleme beim Bauen von Baustellen vermeiden, insbesondere in der Anfangsphase.

Falls gewünscht, haben wir die Möglichkeit, das Box-Modell des Dokuments nach eigenem Ermessen zu ändern, indem wir die Box-Sizing-Eigenschaft verwenden. Aber ich würde dies nicht empfehlen, denn wenn Sie diese Nuance in Zukunft vergessen oder Ihre Websites einfach auf andere Personen übertragen, können Sie sich später in einer ziemlich unangenehmen Situation befinden.

Das Box-Modell ist eines der grundlegenden Konzepte des Layouts.

Die W3C-Spezifikation definiert dieses Konzept wie folgt:

Das CSS-Boxmodell beschreibt eine rechteckige Box, die für ein Element in der Dokumentenstruktur generiert und gemäß dem visuellen Formatierungsmodell gerendert wird.

Auf Russisch bedeutet dies, dass das Element im HTML-Dokument in einem eigenen rechteckigen Block angezeigt wird.

Struktur eines Elements in einem Blockmodell

Im Allgemeinen besteht ein Block aus direkt Inhalt(interner Inhalt), Polsterung, Grenzen und endlich, Ränder.

Um jeden der Bestandteile des Blocks zu steuern, gibt es entsprechende CSS-Eigenschaften: padding - , border - , padding - . Falls gewünscht, können diese Eigenschaften für jede Seite des Blocks separat eingestellt werden (siehe Abbildung):

Was ist der Unterschied zwischen innerer und äußerer Einkerbung?

Für ein Element können Sie also Rahmen (Rahmen) und zwei Arten von Einzügen festlegen. Wie unterscheiden sie sich?

Der Hauptunterschied fällt sofort ins Auge: padding ist das Padding zwischen Inhalt und Rand, margin das Padding zwischen Rand und „Außenwelt“.

Dies impliziert den zweiten Unterschied: Wenn Sie für ein Element einen Hintergrund () festlegen, werden sowohl der Inhalt als auch die Polsterung mit diesem Hintergrund gefüllt. Die Marge, die außen ist, bleibt immer transparent.

Polsterung, wenn wir eine Analogie ziehen, das sind die Ränder auf einem Blatt Papier. Sie haben die gleiche Farbe wie das Blatt selbst, aber der Text geht nicht darüber. Der Rand ist der Abstand vom Rand eines Blattes zu einem anderen benachbarten Blatt oder beispielsweise zum Rand eines Tisches.

Der dritte Unterschied besteht darin, dass Polsterung und Rand unterschiedlich zur Gesamtbreite des Blocks beitragen. Dies hängt vom akzeptierten Blockmodell ab.

Was sind blockmodelle

Derzeit gibt es zwei Hauptblockmodelle: Modell von W3C, das von allen gängigen Browsern unterstützt wird, und die sog traditionell- Es wird von IE6 im Abwärtskompatibilitätsmodus unterstützt.

Was ist der Unterschied zwischen verschiedenen Blockmodellen?

Die Elementblockstruktur ist genau die gleiche. Der einzige Unterschied zwischen den verschiedenen Modellen ist Größenregeln Element.

Im traditionellen Box-Modell, das IE6 im Kompatibilitätsmodus unterstützt, umfassen die Abmessungen eines Elements, die durch die Eigenschaften und angegeben werden, den Inhalt, die Auffüllung und den Rahmen des Elements.

Im Box-Modell des W3C umfassen die Abmessungen eines Elements, die durch die Eigenschaften width und height gegeben sind, nur den Inhaltsteil. Das heißt, Breite und Höhe enthalten keine Füll- oder Rahmengrößen (siehe Abbildung).

Die tatsächliche Breite des Elements ist dementsprechend gleich: + + + + .

Dementsprechend ergibt das gleiche Beispiel „Elementbreite 100px und Padding 10px auf jeder Seite“ bereits einen Block mit einer Gesamtbreite von 120px! Denn width:100px bedeutet genau 100px für den Inhaltsbereich. Alle Paddings und Borders werden zu diesem festen Wert addiert.

Auch die Logik ist klar: Die Hauptsache im Block ist sein Inhalt. Und wenn ich hundert Pixel sage, dann hundert, und keine Paddings und Borders werden für mich etwas ändern!

Auf den ersten Blick ist alles leicht und einfach! Aber es war nicht da…

Wie soll man sich zum Beispiel in einer Situation befinden, in der die Breite eines Elements gleich 100 % ist und die Füllung und/oder der Rand ungleich 0 sind? Dann ist die tatsächliche Breite des Elements größer als 100 %, was nicht immer wünschenswert ist.

Dies ist die größte Herausforderung des W3C-Box-Modells: Wenn die Breite in Prozent und die Auffüllung und der Rahmen in Pixel angegeben sind. Eine solche Situation sollte, wenn nicht vermieden, dann zumindest seltener und mit Verständnis für die Problematik genutzt werden.

Modellverwaltung blockieren

Wie oben beschrieben, kann das Box-Modell des W3C in manchen Fällen etwas umständlich sein, daher haben die klugen Leute beim gleichen W3C in CSS3 die Möglichkeit bereitgestellt, zwischen dem W3C-Box-Modell und dem traditionellen Box-Modell mithilfe der CSS3-Eigenschaft umzuschalten. Weitere Details, wo und wie es verwendet werden kann, sind im Artikel beschrieben.

Vom Autor: alles besteht aus Boxen - das ist vielleicht das Wichtigste, was man in CSS verstehen muss. Im Detail erzeugt jedes Element im Dokument eine Box. Boxen kann auf Block- oder Inline-Level stattfinden. Der Feldtyp bestimmt, wie sich das Element auf das Layout der Seite auswirkt.

Ob eine Box erstellt wird oder nicht, sowie der Typ dieser Box, hängt von der Auszeichnungssprache ab. CSS wurde entwickelt, um HTML-Dokumente zu stylen, daher basiert das visuelle CSS-Rendering-Modell weitgehend auf den Unterschieden zwischen Block- und Inline-Elementen in HTML. Standardmäßig erstellen die p- und section-Elemente Boxen auf Blockebene, und die a-, span- und em-Tags erstellen Inline-Boxen. SVG verwendet das Box-Modell überhaupt nicht, daher funktionieren die meisten CSS-Layout-Eigenschaften nicht mit SVG.

Boxen auf Blockebene erstellen neue Inhaltsblöcke, wie in Abbildung 4.1 zu sehen. Box Boxen werden vertikal in Quellreihenfolge gerendert und füllen (mit Ausnahme von Tabellen) die volle Breite des Containers aus. Dies ist eine normale Anzeige von block , list-item , table und anderen table-* -Werten (wie table-cell ).

Abbildung 4.1. Blocklevel-Boxen in h1-, p-, ul- und Tabellen-Tags innerhalb des Containers (grauer Bereich)

Inline-Level-Boxen bilden keine neuen Inhaltsblöcke. Diese Boxen erzeugen Linien innerhalb der Blockbox. Sie werden horizontal angezeigt und füllen die Breite der Containerbox aus, wobei sie bei Bedarf zu neuen Zeilen springen, wie in Abbildung 4.2 gezeigt. Inline-Level-Boxen enthalten Anzeigeeigenschaftswerte inline, inline-block, inline-table und ruby.

Abbildung 4.2. Inline-Box-Beispiel mit Rand: 1em und Polsterung: 5px

Aber wie werden Kartongrößen berechnet? Hier ist alles etwas komplizierter. In Abbildung 4.3 sehen Sie, dass die Abmessungen der Box die Summe des Inhaltsbereichs, der Polsterung und der Breite plus der Breite des Rahmens sind, wie in CSS2 definiert. Die Breite des Rands erstellt ein Randfeld auf dem Element und wirkt sich auf andere Elemente im Dokument aus, wirkt sich jedoch nicht auf die Abmessungen des Felds selbst aus.

Abbildung 4.3. CSS 2.1 Box-Modell

Beispielsweise hätte ein p-Tag mit einer Breite von 300 Pixel, einer Polsterung von 20 Pixel und einem Rand von 10 Pixel eine berechnete Breite von 360 Pixel. Die Breite setzt sich aus der Absatzbreite, dem linken und rechten Padding sowie der linken und rechten Randbreite zusammen. Damit das Element eine Gesamtbreite von 300 Pixel hat, aber dennoch 20 Pixel Polsterung und 10 Pixel Rand behält, würden Sie die Breite auf 240 Pixel einstellen. Die meisten Browser berechnen die Breite auf diese Weise. Dies gilt jedoch nicht für IE 5.5.

IE 5.5 verwendet die Eigenschaft width als endgültigen Wert für die Abmessungen der Box und verschiebt die Polsterung und den Rahmen in die Box, wie in Abbildung 4.4 gezeigt. Beide Werte werden von width abgezogen, wodurch der Inhaltsbereich verkleinert wird. Viele Programmierer finden diesen Ansatz sinnvoller, obwohl er nicht spezifikationsgemäß funktioniert.

Abbildung 4.4 Box-Modell in CSS 2.1 und Box-Modell im alten IE 5.5

Die CSS-Arbeitsgruppe führte die Box-Sizing-Eigenschaft als einen Teilweg ein, um diese konkurrierenden Modelle anzugehen. Es ermöglicht Ihnen, die Implementierung des Box-Modells auszuwählen, und vereinfacht außerdem die Berechnungen bei der Arbeit mit adaptivem Design erheblich.

Auswählen eines Box-Modells mithilfe der Box-Sizing-Eigenschaft

Die Box-Sizing-Eigenschaft ist in der CSS Basic User Interface Module Level 3-Spezifikation definiert und nimmt zwei mögliche Werte an: content-box und border-box.

Der Standardwert ist content-box. Mit diesem Wert wirken sich die Eigenschaften width und height auf die Größe des Inhaltsbereichs aus, was dem gleichen Verhalten entspricht, wie es in der CSS 2.1-Spezifikation beschrieben wird. Dieses Verhalten ist in modernen Browsern standardmäßig eingestellt (wie in Abbildung 4.4 gezeigt).

Der Border-Box-Wert fügt etwas Magie hinzu. Die Breiten- und Höheneigenschaften beginnen sich auf den äußeren Rahmenrand und nicht auf den Inhaltsbereich zu beziehen. Der Rahmen und die Füllung werden innerhalb der Box des Elements gezeichnet, was dem alten Verhalten in IE 5.5 entspricht. Schauen wir uns ein Beispiel an, bei dem die prozentuale Breite mit den Pixeln auf der Polsterung und dem Rand ausgerichtet ist:

Der folgende CSS-Code wurde auf die Tags article und aside angewendet, wodurch wir das in Abbildung 4.5 gezeigte Layout erhalten, in dem das erste Element 60 % breit und das zweite Element 40 % breit ist:

Artikel, beiseite ( Hintergrund: #FFEB3B; Rand: 10px solid #9C27B0; Float: left; padding: 10px; ) Artikel (Breite: 60%; ) beiseite (Breite: 40%; )

Abbildung 4.5. Elemente mit Box-Sizing: content-box

Standardmäßig sind aside und article auf Box-Sizing mit dem Wert content-box eingestellt. Die Werte border-width und padding addieren 40 Pixel zur Breite der Elemente, wodurch sich das Verhältnis auf 60 %/40 % ändert. Lassen Sie uns die Eigenschaft box-sizing: border-box zum Artikel und neben den Tags hinzufügen:

Artikel, beiseite ( box-sizing: border-box; )

Die Änderungen sind in Abbildung 4.6 dargestellt: Die Breite der Elemente bleibt erhalten, aber aufgrund von box-sizing: border-box besteht die Breite jetzt auch aus einem Rahmen und einem Padding. Die Breite wird jetzt auf den äußeren Rand des Rahmens angewendet und nicht auf den Inhaltsbereich, sodass unsere Elemente eng aneinander liegen und nicht in die neue Zeile verschoben wurden.

Abbildung 4.6 Elemente mit Box-Sizing: Border-Box

Ich würde vorschlagen, die Eigenschaft box-sizing: border-box zu verwenden. Es vereinfacht das Leben, es muss nicht die Breite berechnet werden, um die Polsterung und die Randbreite anzupassen.

Verwenden Sie am besten Box-Sizing: Border-Box mit Reset-Regeln. Das folgende Beispiel stammt aus Chris Coyiers CSS-Tricks-Artikel "