Boxmodell des Dokuments letzter Test 23. Boxmodell - Blockmodell. Polsterung und Randfarbe
Letzte Aktualisierung: 21.04.2016
Für einen Webbrowser werden Seitenelemente durch kleine Container oder Blöcke dargestellt. Solche Blöcke können unterschiedliche Inhalte haben – Texte, Bilder, Listen, Tabellen und andere Elemente. Die internen Elemente von Blöcken fungieren selbst als Blöcke.
Schematisch lässt sich das Blockmodell wie folgt darstellen:
Lassen Sie das Element in einem externen Container liegen. Dies kann ein Body-Element, ein Div usw. sein. Es ist durch einen bestimmten Abstand von anderen Elementen getrennt – einen externen Rand, der durch die CSS-Margin-Eigenschaft beschrieben wird. Das heißt, die Margin-Eigenschaft bestimmt den Abstand vom Rand des aktuellen Elements zu anderen benachbarten Elementen oder zu den Rändern des äußeren Containers.
Nach dem Rand folgt die Auffüllung, die in CSS durch die Eigenschaft „padding“ beschrieben wird. Der Abstand definiert den Abstand vom Rand des Elements zum inneren Inhalt.
Definieren wir beispielsweise die folgende Webseite:
Erster Block
Zweiter Block
Nachdem wir die Webseite im Browser gestartet haben, können wir das Blockmodell bestimmter Elemente anzeigen. Klicken Sie dazu mit der rechten Maustaste auf das gewünschte Element und wählen Sie im sich öffnenden Kontextmenü den Eintrag aus, der Ihnen die Ansicht des Quellcodes des Elements ermöglicht. Dieses Element kann für verschiedene Browser unterschiedliche Namen haben. In Google Chrome ist dies beispielsweise der View-Code:
In Mozilla Firefox heißt dieses Element Element erkunden.
Und wenn Sie dieses Element auswählen, öffnet der Browser ein Panel, in dem der Code des Elements, seine Stile und sein Blockmodell angezeigt werden:
In diesem Modell können wir sehen, wie die Einzüge eines Elements und seines Randes festgelegt werden, wir können uns die Einzüge anderer Elemente ansehen und bei Bedarf die Werte ihrer Stile dynamisch ändern.
Wenn wir die Werte der Eigenschaften margin, padding und border nicht explizit angeben, verwendet der Browser die voreingestellten Werte.
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 im Dokumentbaum generiert und gemäß einem visuellen Formatierungsmodell gerendert wird.
Auf Russisch bedeutet dies, dass ein Element in einem HTML-Dokument in einem eigenen separaten rechteckigen Block angezeigt wird.
Elementstruktur in einem Blockmodell
Im Allgemeinen besteht ein Block direkt aus Inhalt(interne Inhalte), Polsterung, Grenzen und endlich, Ränder.
Um die einzelnen Bestandteile des Blocks zu steuern, gibt es entsprechende CSS-Eigenschaften: padding - , borders - , padding - . Auf Wunsch können diese Eigenschaften für jede Seite des Blocks separat eingestellt werden (siehe Abbildung):
Was ist der Unterschied zwischen Innen- und Außenpolsterung?
Sie können also für ein Element Rahmen (Rahmen) und zwei Arten von Einzügen festlegen. Wie unterscheiden sie sich?
Der Hauptunterschied ist sofort ersichtlich: padding ist der Abstand zwischen dem Inhalt und dem Rand, und margin ist der Abstand zwischen dem Rand und der „Außenwelt“.
Dies führt zum zweiten Unterschied: Wenn Sie für ein Element einen Hintergrund () festlegen, werden sowohl der Inhalt als auch die interne Polsterung mit diesem Hintergrund gefüllt. Da der Rand draußen ist, bleibt er immer transparent.
Unter Polsterung versteht man, um eine Analogie zu verwenden, die Ränder auf einem Blatt Papier. Sie haben die gleiche Farbe wie das Blatt selbst, aber der Text steht nicht darauf. Der Rand ist der Abstand vom Rand des Blattes zu einem anderen angrenzenden Blatt oder beispielsweise zum Rand des Tisches.
Der dritte Unterschied besteht darin, dass Polsterung und Rand unterschiedlich zur Berechnung der Gesamtblockbreite beitragen. Dies hängt vom verwendeten Blockmodell ab.
Was sind die Blockmodelle?
Derzeit gibt es zwei Hauptblockmodelle: Modell von W3C, das von allen gängigen Browsern unterstützt wird und heißt traditionell– Es wird von IE6 im Abwärtskompatibilitätsmodus unterstützt.
Was ist der Unterschied zwischen verschiedenen Blockmodellen?
Die Elementblockstruktur ist absolut gleich. 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, den Abstand und den Rand des Elements.
Im W3C-Boxmodell umfassen die Abmessungen eines Elements, die durch die Eigenschaften width und height angegeben werden, nur den Inhaltsteil. Das heißt, Breite und Höhe beinhalten weder die Füllmaße noch die Randmaße (siehe Abbildung).
Die tatsächliche Breite des Elements beträgt dementsprechend: + + + + .
Dementsprechend ergibt das gleiche Beispiel „Elementbreite 100 Pixel und Auffüllung 10 Pixel auf jeder Seite“ bereits einen Block mit einer Gesamtbreite von 120 Pixel! Da width:100px genau 100px für den Inhaltsbereich bedeutet. Alle Abstände und Ränder werden zu diesem festen Wert addiert.
Auch die Logik ist klar: Die Hauptsache in einem Block ist sein Inhalt. Und wenn ich einhundert Pixel sage, dann heißt das auch einhundert, und für mich wird sich durch keine noch so große Auffüllung oder Umrandung etwas ändern!
Auf den ersten Blick ist alles einfach und unkompliziert! Aber es war nicht da...
Was ist beispielsweise zu tun, wenn die Breite des Elements 100 % beträgt, der Abstand und/oder der Rand jedoch nicht gleich 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 Schwierigkeit des W3C-Blockmodells: Wenn die Breite in Prozent angegeben wird und der Abstand und der Rand in Pixel angegeben werden. Diese Situation sollte, wenn nicht vermieden, so doch zumindest seltener und mit Verständnis für das Problem genutzt werden.
Blockmodellverwaltung
Wie oben beschrieben, kann das W3C-Box-Modell in einigen Fällen große Probleme verursachen. Daher haben die klugen Leute des W3C in CSS3 die Möglichkeit integriert, mithilfe der CSS3-Eigenschaft zwischen dem W3C-Box-Modell und dem traditionellen Box-Modell zu wechseln. Weitere Details, wo und wie dies verwendet werden kann, werden im Artikel beschrieben.
Das CSS-Box-Modell ist die Grundlage des Layouts im Web – jedes Element wird als rechteckige Box dargestellt, wobei der Inhalt, die Polsterung, der Rand und der Rand der Box wie die Schichten einer Zwiebel umeinander herum aufgebaut sind. Als Browser Beim Rendern eines Webseitenlayouts wird ermittelt, welche Stile auf den Inhalt jedes Felds angewendet werden, wie groß die umgebenden Zwiebelebenen sind und wo die Felder im Verhältnis zueinander angeordnet sind. Bevor Sie verstehen, wie CSS-Layouts erstellt werden, müssen Sie dies tun Das Box-Modell verstehen – das werden wir uns in diesem Artikel ansehen.
| Voraussetzungen: | Grundlegende Computerkenntnisse, Grundkenntnisse über HTML-Grundlagen (Studie Einführung in HTML) und eine Vorstellung davon, wie CSS funktioniert (Studieren Sie die vorherigen Artikel in diesem Modul). |
|---|---|
| Zielsetzung: | Erfahren Sie, wie das CSS-Box-Modell funktioniert und wie einzelne Elemente auf einer Seite angeordnet werden. |
Boxeigenschaften
Jedes Element innerhalb eines Dokuments ist als rechteckiges Feld innerhalb des Dokumentlayouts strukturiert, dessen Größe und „Zwiebelebenen“ mithilfe bestimmter CSS-Eigenschaften angepasst werden können. Die relevanten Eigenschaften sind wie folgt:
Notiz: Ränder weisen ein bestimmtes Verhalten auf, das Randkollaps genannt wird: Wenn zwei Kästchen einander berühren, entspricht der Abstand zwischen ihnen dem Wert des größten der beiden sich berührenden Ränder und nicht ihrer Summe.
Aktives Lernen: Spielen mit Kisten
Lassen Sie uns an dieser Stelle in einen aktiven Lernabschnitt springen und einige Übungen durchführen, um einige der oben besprochenen Besonderheiten des Boxmodells zu veranschaulichen. Sie können diese Übungen unten im Live-Editor ausprobieren, aber es könnte einfacher sein Sehen Sie sich einige der Effekte an, wenn Sie separate HTML- und CSS-Dateien lokal erstellen und es stattdessen in einem separaten Browserfenster ausprobieren. Den Beispielcode finden Sie auf Github.
Wenn Sie einen Fehler machen, können Sie ihn jederzeit mit zurücksetzen Zurücksetzen Taste. Wenn Sie wirklich nicht weiterkommen, drücken Sie die Taste Lösung anzeigen Klicken Sie auf die Schaltfläche, um eine mögliche Antwort anzuzeigen.
Im folgenden bearbeitbaren Beispiel haben wir einen Satz von drei Feldern, die alle Textinhalt enthalten und so gestaltet sind, dass sie sich über die gesamte Breite des Textkörpers erstrecken. Sie werden durch Elemente dargestellt, die einführende Inhalte darstellen, typischerweise eine Gruppe von Einführungs- oder Navigationshilfen. Es kann einige Überschriftenelemente, aber auch andere Elemente wie ein Logo, ein Suchformular, einen Autorennamen usw. enthalten
- Sehen Sie sich das Boxmodell jedes einzelnen Elements auf der Seite an, indem Sie die Browser-Entwicklertools öffnen und im DOM-Inspektor auf die Elemente klicken. Weitere Informationen dazu finden Sie unter Entdecken Sie die Browser-Entwicklertools. Jeder Browser verfügt über einen Box-Modell-Viewer, der genau anzeigt, welche Ränder, Ränder und Abstände auf jede Box angewendet werden, wie groß die Inhaltsbox ist und wie viel Platz das Element insgesamt einnimmt.
- Legen Sie einen Rand unten für das Element fest, das den dominanten Inhalt des Elements darstellt eines Dokuments. Der Hauptinhaltsbereich besteht aus Inhalten, die in direktem Zusammenhang mit dem zentralen Thema eines Dokuments oder der zentralen Funktionalität einer Anwendung stehen oder dieses erweitern
Element, sagen wir 20px. Legen Sie nun einen Rand oben für das Element fest, um eine Fußzeile für den nächstgelegenen Abschnittsinhalt oder das Abschnittswurzelelement darzustellen. Eine Fußzeile enthält normalerweise Informationen über den Autor des Abschnitts, Copyright-Daten oder Links zu verwandten Dokumenten - Legen Sie einen Rand von 30 Pixel und einen Abstand von 30 Pixel auf jeder Seite des Elements fest, um den dominanten Inhalt des Elements darzustellen eines Dokuments. Der Hauptinhaltsbereich besteht aus Inhalten, die in direktem Zusammenhang mit dem zentralen Thema eines Dokuments oder der zentralen Funktionalität einer Anwendung stehen oder dieses erweitern
Element – Beachten Sie, dass sich sowohl der Abstand um das Element (der Rand) als auch der Abstand zwischen dem Rand und dem Inhalt (der Abstand) vergrößern, wodurch der eigentliche Inhalt weniger Platz einnimmt. Überprüfen Sie dies erneut mit den Browser-Entwicklertools. - Das Festlegen eines größeren Rahmens auf allen Seiten des Elements stellt den dominanten Inhalt des Elements dar eines Dokuments. Der Hauptinhaltsbereich besteht aus Inhalten, die in direktem Zusammenhang mit dem zentralen Thema eines Dokuments oder der zentralen Funktionalität einer Anwendung stehen oder dieses erweitern
Element, sagen wir 40 Pixel, und beachten Sie, dass dadurch Platz vom Inhalt und nicht vom Rand oder der Polsterung weggenommen wird. Sie könnten dies tun, indem Sie mit der Eigenschaft border einen komplett neuen Satz an Werten für die Breite, den Stil und die Farbe festlegen, z.B. 60px rot gestrichelt, aber da die Eigenschaften bereits in einer vorherigen Regel festgelegt wurden, können Sie einfach eine neue border-width festlegen. - Standardmäßig ist die Inhaltsbreite auf 100 % des verfügbaren Platzes eingestellt (nachdem Rand, Rahmen und Innenabstand ihren Anteil eingenommen haben) – wenn Sie die Breite des Browserfensters ändern, werden die Felder vergrößert und verkleinert, um im Beispiel enthalten zu bleiben Ausgabefenster. Die Höhe des Inhalts entspricht standardmäßig der Höhe des darin enthaltenen Inhalts.
- Versuchen Sie, eine neue Breite und Höhe für das Element festzulegen, das den dominanten Inhalt des Elements darstellt eines Dokuments. Der Hauptinhaltsbereich besteht aus Inhalten, die in direktem Zusammenhang mit dem zentralen Thema eines Dokuments oder der zentralen Funktionalität einer Anwendung stehen oder dieses erweitern
Element – beginnen Sie beispielsweise mit einer Breite von 400 Pixel und einer Höhe von 200 Pixel – und beobachten Sie den Effekt. Sie werden feststellen, dass sich die Breite nicht mehr ändert, wenn die Größe des Browserfensters geändert wird. - Versuchen Sie, eine prozentuale Breite für das Element festzulegen, das den dominanten Inhalt des Elements darstellt eines Dokuments. Der Hauptinhaltsbereich besteht aus Inhalten, die in direktem Zusammenhang mit dem zentralen Thema eines Dokuments oder der zentralen Funktionalität einer Anwendung stehen oder dieses erweitern
stattdessen ein Element - sagen wir 60 % Breite - und beobachten Sie den Effekt. Sie sollten sehen, dass sich die Breite nun erneut ändert, wenn die Größe des Browserfensters geändert wird. Entfernen Sie das Element, das den dominanten Inhalt darstellt eines Dokuments. Der Hauptinhaltsbereich besteht aus Inhalten, die in direktem Zusammenhang mit dem zentralen Thema eines Dokuments oder der zentralen Funktionalität einer Anwendung stehen oder dieses erweitern Stellen Sie vorerst die Höheneinstellung des Elements ein. - Versuchen Sie, Ihr Element so einzustellen, dass es den dominanten Inhalt des darstellt eines Dokuments. Der Hauptinhaltsbereich besteht aus Inhalten, die in direktem Zusammenhang mit dem zentralen Thema eines Dokuments oder der zentralen Funktionalität einer Anwendung stehen oder dieses erweitern
Stellen Sie sicher, dass der Abstand und der Rand des Elements auf allen Seiten 5 % betragen, und beobachten Sie das Ergebnis. Wenn Sie die Entwicklertools Ihres Browsers verwenden, um die Breite des Beispielausgabefensters zu überprüfen und diese mit der Breite des Rands/der Polsterung zu vergleichen, erhalten Sie Folgendes: Sie werden sehen, dass diese 5 % „5 % der Breite des enthaltenden Elements“ bedeuten. Wenn also die Größe des Beispielausgabefensters zunimmt, nehmen auch die Abstände/Ränder zu. - Ränder können negative Werte annehmen, die dazu verwendet werden können, dass sich Elementboxen überlappen. Versuchen Sie es mit margin-top: -50px; auf dem Element stellt den dominanten Inhalt des dar eines Dokuments. Der Hauptinhaltsbereich besteht aus Inhalten, die in direktem Zusammenhang mit dem zentralen Thema eines Dokuments oder der zentralen Funktionalität einer Anwendung stehen oder dieses erweitern
Element, um den Effekt zu sehen. - Experimentieren Sie weiter!
Spielbarer Code
HTML-Eingabe
CSS-Eingabe
Ausgabe
Einige Hinweise und Ideen:
Erweiterte Boxmanipulation
Neben der Einstellung von Breite, Höhe, Rand, Abstand und Rand von Boxen stehen noch einige andere Eigenschaften zur Verfügung, mit denen Sie deren Verhalten ändern können. In diesem Abschnitt werden diese anderen Eigenschaften erläutert.
Überlauf
Wenn Sie die Größe einer Box mit absoluten Werten festlegen (z. B. eine feste Pixelbreite/-höhe), passt der Inhalt möglicherweise nicht in die zulässige Größe, was dazu führt, dass der Inhalt über die Box hinausläuft. Um zu steuern, was in solchen Fällen passiert, können wir die Eigenschaft overflow verwenden. Es sind mehrere mögliche Werte möglich, die gebräuchlichsten sind jedoch:
- automatisch: Wenn zu viel Inhalt vorhanden ist, wird der überlaufende Inhalt ausgeblendet und Bildlaufleisten werden angezeigt, damit der Benutzer scrollen kann, um den gesamten Inhalt anzuzeigen.
- versteckt: Wenn zu viel Inhalt vorhanden ist, wird der überlaufende Inhalt ausgeblendet.
- sichtbar: Wenn zu viel Inhalt vorhanden ist, wird der überlaufende Inhalt außerhalb des Rahmens angezeigt (dies ist normalerweise das Standardverhalten).
Hier ist ein einfaches Beispiel, um zu zeigen, wie diese Einstellungen funktionieren:
Zuerst etwas HTML:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempus turpis id ante mollis dignissim. Nam sed dolor non tortor lacinia lobortis id dapibus nunc. Praesent iaculis tincidunt Fieber. Integer-Wirkung ist nicht möglich, sie wird nicht mehr benötigt und nicht mehr benötigt. Praesent non elit metus. Morbi vel sodales ligula.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempus turpis id ante mollis dignissim. Nam sed dolor non tortor lacinia lobortis id dapibus nunc. Praesent iaculis tincidunt Fieber. Integer-Wirkung ist nicht möglich, sie wird nicht mehr benötigt und nicht mehr benötigt. Praesent non elit metus. Morbi vel sodales ligula.
Und jetzt etwas CSS, das wir auf unseren HTML-Code anwenden können:
P (Breite: 400px; Höhe: 2,5em; Polsterung: 1em 1em 1em 1em; Rand: 1px durchgehend schwarz; ) .autoscroll ( Überlauf: automatisch; ) .clipped ( Überlauf: versteckt; ) .default ( Überlauf: sichtbar; )
Der obige Code liefert das folgende Ergebnis:
Hintergrundclip
Boxhintergründe bestehen aus übereinander gestapelten Farben und Bildern (Hintergrundfarbe, Hintergrundbild). Sie werden auf eine Box angewendet und unter dieser Box gezeichnet. Standardmäßig erstrecken sich Hintergründe bis zum äußeren Rand des Rahmens. Das ist oft in Ordnung, aber in manchen Fällen kann es störend sein (was ist, wenn Sie ein gekacheltes Hintergrundbild haben, das nur bis zum Rand des Inhalts erweitert werden soll?) Dieses Verhalten kann durch Festlegen von oder angepasst werden
Schauen wir uns ein Beispiel an, um zu sehen, wie das funktioniert. Zuerst unser HTML:
Div ( Breite: 60 Pixel; Höhe: 60 Pixel; Rand: 20 Pixel fest rgba(0, 0, 0, 0,5); Polsterung: 20 Pixel; Rand: 20 Pixel 0; Hintergrundgröße: 140 Pixel; Hintergrundposition: Mitte; Hintergrundbild: url("https://mdn.mozillademos.org/files/11947/ff-logo.png"); Hintergrundfarbe: Gold; ) .default ( Hintergrundclip: Rahmenbox; ) .padding-box ( Hintergrund -clip: padding-box; ) .content-box (background-clip: content-box; )
Der obige Code erzeugt das folgende Ergebnis:
Gliederung
Siehe auch
- Blockformatierungskontext: Der Fachbegriff für ein CSS-Feld, das auf einer Webseite angeordnet ist.
- Visuelles Formatierungsmodell: Eine ausführliche Erläuterung des Algorithmus, der CSS-Boxen auf einer Webseite anordnet.
In diesem Artikel geht es um einen sehr wichtigen Aspekt des Webseiten-Layouts – das Box-Modell, oder mit anderen Worten, ein Blocksystem für das Website-Layout.
Um die Essenz dieses Konzepts zu verdeutlichen, wenden wir uns den Spezifikationen zu W3C. In diesem Dokument heißt es, dass ein Blockelement ein Rechteck ist, das für Dokumentbaum-Tags erstellt wird.
Einfach ausgedrückt werden Tags innerhalb einer Seite bei der Anzeige auf dem Bildschirm in Rechtecke umgewandelt.
Struktur eines Blockelements
Der Aufbau des Boxmodells ist nicht besonders komplex.
Grob gesagt ähnelt es Nistpuppen aus Rechtecken: Das größte Rechteck ist der äußere Rand oder die Einrückung, gefolgt vom Rand des Blockelements selbst, dann den inneren Einrückungen und dem Inhalt selbst.
Um dieses Problem deutlicher zu veranschaulichen, sehen Sie sich die folgende Abbildung an:
Die Größe jeder Komponente wird mithilfe des entsprechenden CSS-Stils angepasst: Marge– externe Felder, Grenze– die Grenzen des Elements selbst und Polsterung– Größe der internen Felder.
Es ist auch erwähnenswert, dass die Größe der Ränder und Ränder 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 sollten Sie eine klare Grenze zwischen den Konzepten der internen und externen Einrückung ziehen. Mit äußerer Polsterung ist in diesem Sinne der Abstand zwischen den äußeren umgebenden Elementen und dem Rand des Blockelements selbst gemeint, mit innerer Polsterung ist der Abstand vom Inhalt zum Rand gemeint.
Der nächste grundlegende Unterschied zwischen diesen Elementen besteht darin, dass sich die Farbe beim Zuweisen einer bestimmten Farbe zum Hintergrund nur auf den Raum ausbreitet, der mit dem Füllelement verknüpft ist.
Ein weiteres Unterscheidungsmerkmal dieser Elemente liegt in 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 Dokumentblockmodell ab.
Arten von Blockmodellen
Heute gibt es nur noch 2 verschiedene Modelle von Blocksystemen: traditionell, basierend auf den Betriebsfunktionen 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 den Blöcken in den herkömmlichen und den allgemein verwendeten Systemen. Es basiert auf den unterschiedlichen Regeln zur Berechnung der Höhe und Breite eines Blocks.
Gemäß der traditionellen Struktur des Blockelementsystems 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.
Allerdings berücksichtigt das modernere Blocksystem, das durch die W3C-Postulate geregelt wird, bei der Zuweisung von Breiten- und Höheneigenschaften nur den Inhalt. Ein deutlicher Unterschied ist in der folgenden Abbildung dargestellt:
Es ist sehr wichtig, diese Unterschiede beim Erstellen einer neuen Webressource zu berücksichtigen.
Ermittlung der tatsächlichen Abmessungen von Elementen
Ich hoffe, dass mit dem traditionellen Ansatz, einem Block Höhe und Breite zuzuweisen, alles sehr klar ist. Wenn ein Webmaster beispielsweise den folgenden Code in eine CSS-Datei schreibt:
Block (Breite: 200 Pixel; Polsterung: 20 Pixel;)
Dies bedeutet, dass ein Element mit der Blockklasse 200 Pixel breit ist, wobei berücksichtigt wird, dass der Inhalt selbst 180 Pixel einnimmt und die restlichen 20 Pixel als Auffüllung verwendet werden.
Der zweite Fall, der nicht traditionell ist, ist mit gewissen Schwierigkeiten verbunden. Sie entstehen, weil die Eigenschaften „Breite“ und „Höhe“ nur für den Inhalt gelten und die Blockabmessungen daher nicht mit diesen Parametern übereinstimmen.
Genau deshalb Ein Layoutdesigner mit Selbstachtung muss wissen, wie die tatsächlichen Abmessungen eines Blockelements bestimmt werden. Bei der Bearbeitung dieses Punktes hilft uns eine Zeichnung, die die Komponenten veranschaulicht, aus denen der Block besteht:
Daraus folgt, dass Sie zum Bestimmen beispielsweise der Höhe eines Blockelements den oberen und unteren Abstand, die Ränder und die Inhaltshöhe hinzufügen müssen. Ähnliche Berechnungen werden bei der Bestimmung der Breite des Elements durchgeführt, die in der folgenden Abbildung dargestellt ist:
Eine interessante Situation entsteht jedoch, wenn die Breite als Prozentsatz mit einem Rand und einer Auffüllung ungleich Null festgelegt wird. Dann liegt natürlich ein Fehler in den Abmessungen des Elements vor.
Deshalb versuchen erfahrene Webmaster, die prozentuale Angabe der Breite für das Blocklayout gemäß den W3C-Regeln so wenig wie möglich zu verwenden.
Zusammenfassen
Wenn Sie dieses Problem gelöst haben, können Sie viele Probleme beim Entwerfen von Websites vermeiden, insbesondere in der Anfangsphase.
Auf Wunsch haben wir die Möglichkeit, das Blockmodell des Dokuments mithilfe der Box-Sizing-Eigenschaft nach eigenem Ermessen zu ändern. Ich würde dies jedoch nicht empfehlen, denn wenn Sie diese Nuance in Zukunft vergessen oder Ihre Websites einfach an andere Personen übertragen, könnten Sie in eine ziemlich unangenehme Situation geraten.
Wir haben uns mit HTML und CSS vertraut gemacht, wie sie aussehen und wie man einige Grundlagen anwendet. Jetzt tauchen wir etwas tiefer ein und schauen uns genauer an, wie Elemente auf der Seite angezeigt und ihre Größen festgelegt werden.
Unterwegs besprechen wir ein Thema, das als Box-Modell bekannt ist, und wie es mit HTML und CSS funktioniert. Wir werden uns auch einige neue CSS-Eigenschaften ansehen und einige der Größenwerte verwenden, die wir in Lektion 3 behandelt haben. Fangen wir an.
Wie werden Elemente angezeigt?
Bevor wir zum Boxmodell übergehen, müssen wir verstehen, wie Elemente angezeigt werden. In Lektion 2 haben wir uns den Unterschied zwischen Block- und Inline-Elementen angesehen. Eine kurze Erinnerung daran, dass Blockelemente unabhängig von ihrem Inhalt die gesamte verfügbare Breite einnehmen und in einer neuen Zeile beginnen. Inline-Elemente nehmen die für den Inhalt erforderliche Breite ein und werden nacheinander in derselben Zeile aufgereiht. Blockelemente werden typischerweise für große Inhaltsteile wie Überschriften und Strukturelemente verwendet. Inline-Elemente werden typischerweise für kleine Inhaltsteile verwendet, beispielsweise ein paar Wörter in Fett- oder Kursivschrift.
Anzeige
Wie genau Elemente angezeigt werden – als Block oder Inline oder etwas anderes – wird durch die Anzeigeeigenschaft bestimmt. Jedes Element enthält einen Standardwert für die Anzeigeeigenschaft, aber wie jeder andere Eigenschaftswert kann dieser Wert überschrieben werden. Es gibt eine ganze Reihe von Werten für die Anzeigeeigenschaft, aber die häufigsten sind block , inline , inline-block und none .
Wir können den Wert der Anzeigeeigenschaft eines Elements ändern, indem wir dieses Element in CSS auswählen und einen neuen Wert für die Anzeigeeigenschaft festlegen. Der Blockwert macht dieses Element zu einem Blockelement.
P (Anzeige: Block;)
Der Wert inline macht dieses Element inline.
P (Anzeige: inline;)
Das Interessanteste ist der Inline-Block-Wert. Wenn Sie es verwenden, kann sich das Element wie ein Blockelement verhalten, einschließlich aller Eigenschaften des Blockmodells (auf das wir gleich eingehen werden). Das Element erscheint jedoch standardmäßig in einer Zeile mit anderen Elementen und beginnt nicht in einer neuen Zeile.
P (Anzeige: Inline-Block;)
Inline-Block-Demo
Abstand zwischen Inline-Block-Elementen
Ein wichtiger Unterschied zwischen Inline-Block-Elementen besteht darin, dass sie sich nicht immer berühren oder direkt nebeneinander erscheinen. Normalerweise bleibt zwischen den beiden Elementen ein kleiner Abstand. Dieser Platz mag nervig sein, aber das ist in Ordnung. Im nächsten Tutorial besprechen wir, warum es existiert und wie man es entfernt.
Mit dem Wert „none“ blenden wir schließlich das Element vollständig aus und zeigen die Seite so an, als ob das Element nicht vorhanden wäre. Alle in einem solchen Element verschachtelten Elemente werden ebenfalls ausgeblendet.
Div (Anzeige: keine;)
Es ist sehr wichtig zu wissen, wie Elemente angezeigt werden und wie die Anzeige geändert wird, da die Anzeige die Anzeige des Boxmodells beeinflusst. Während wir das Box-Modell besprechen, werden wir uns unbedingt mit diesen verschiedenen Implikationen befassen und wie sie sich auf die Darstellung eines Elements auswirken können.
Was ist ein Blockmodell?
Gemäß dem Box-Modell-Konzept ist jedes Element auf einer Seite ein rechteckiger Block und kann eine Breite, Höhe, einen Rand, einen Rand und einen Abstand haben.
Es lohnt sich zu wiederholen: Jedes Element auf der Seite ist ein rechteckiger Block.
Reis. 4.01. Wenn wir jedes Element einzeln betrachten, können wir erkennen, dass sie alle rechteckig sind, unabhängig von ihrer dargestellten Form
Jedes Element auf jeder Seite folgt dem Box-Modell, daher ist dies unglaublich wichtig. Werfen wir einen Blick darauf, zusammen mit einigen neuen CSS-Eigenschaften, um besser zu verstehen, wie wir damit arbeiten können.
Arbeiten mit einem Blockmodell
Jedes Element ist ein rechteckiger Block und es gibt mehrere Eigenschaften, die die Größe dieses Blocks festlegen. Das Innere eines Blocks wird durch die Breite und Höhe des Elements bestimmt, die durch die Anzeigeeigenschaft, den Inhalt des Elements oder die Eigenschaften Breite und Höhe angegeben werden können. padding und dann border erweitern die Abmessungen des Blocks über die Breite und Höhe des Elements hinaus. Schließlich geht jeder angegebene Rand über den Rahmen hinaus.
Jeder Teil des Box-Modells entspricht einer CSS-Eigenschaft: width , height , padding , border und margin .
Schauen wir uns diese Eigenschaften in einem Code an:
Div (Rahmen: 6 Pixel durchgezogen #949599; Höhe: 100 Pixel; Rand: 20 Pixel; Abstand: 20 Pixel; Breite: 400 Pixel;)
Nach dem Blockmodell lässt sich die Gesamtbreite eines Elements mit folgender Formel berechnen:
Rand rechts + Rand rechts + Abstand rechts + Breite + Abstand links + Rand links + Rand links
Zum Vergleich lässt sich nach dem Blockmodell die Gesamthöhe eines Elements mit folgender Formel berechnen:
Rand oben + Rand oben + Polster oben + Höhe + Polster unten + Rand unten + Rand unten
Reis. 4.02. Das Box-Modell umfasst eine Basishöhe und -breite sowie Polsterung, Rand und Rand
Mithilfe dieser Formeln können wir die Gesamthöhe und -breite des Blocks aus unserem Beispiel ermitteln.
Breite: 492px = 20px + 6px + 20px + 400px + 20px + 6px + 20px Höhe: 192px = 20px + 6px + 20px + 100px + 20px + 6px + 20px
Das Box-Modell ist ohne Zweifel einer der verwirrendsten Teile von HTML und CSS. Wir setzen die Eigenschaft width auf 400 Pixel, aber die tatsächliche Breite unseres Elements beträgt 492 Pixel. Standardmäßig ist das Boxmodell additiv. Um die tatsächliche Blockgröße zu bestimmen, müssen wir daher die Ränder, Ränder und Polsterung für alle vier Seiten des Blocks berücksichtigen. Unsere Breite umfasst nicht nur den Wert der Eigenschaft width, sondern auch die Größe des linken und rechten Rands, des linken und rechten Rands sowie des linken und rechten Abstands.
Im Moment ergeben viele dieser Eigenschaften keinen großen Sinn, und das ist in Ordnung. Schauen wir uns zur Verdeutlichung alle Eigenschaften für Breite, Höhe, Abstand, Rand und Rand genauer an, aus denen das Box-Modell besteht.
Breite und Höhe
Jedes Element hat eine Standardbreite und -höhe. Diese Breite und Höhe können Null sein, aber Browser rendern jedes Element standardmäßig mit einer Größe. Abhängig davon, wie das Element gerendert wird, können die Standardbreite und -höhe angemessen sein. Wenn es sich bei einem Element um ein Schlüsselelement in einem Seitenlayout handelt, muss es möglicherweise auf bestimmte Breiten- und Höheneigenschaften eingestellt werden. In diesem Fall können Eigenschaftswerte für Nicht-Inline-Elemente angegeben werden.
Breite
Standardmäßig basiert die Breite eines Elements auf dem Anzeigewert. Blockelemente haben eine Standardbreite von 100 % und nehmen den gesamten verfügbaren horizontalen Platz ein. Inline- und Inline-Block-Elemente werden horizontal erweitert und verkleinert, um ihren Inhalt aufzunehmen. Inline-Elemente können keine feste Größe haben, daher gelten Breite und Höhe nur für Nicht-Inline-Elemente. Um eine bestimmte Breite für Nicht-Linienelemente festzulegen, verwenden Sie die Eigenschaft width:
Div (Breite: 400px; )
Höhe
Die Standardhöhe eines Elements wird durch seinen Inhalt bestimmt. Das Element wird je nach Bedarf vertikal erweitert und verkleinert, um seinen Inhalt aufzunehmen. Mit der Eigenschaft height können Sie eine bestimmte Höhe für nichtlineare Elemente festlegen:
Div (Höhe: 100px;)
Abmessungen von Inline-Blockelementen
Bitte beachten Sie, dass Inline-Elemente keine Breiten- und Höheneigenschaften oder deren Werte akzeptieren. Block- und Inline-Elemente übernehmen jedoch Breiten- und Höheneigenschaften und die entsprechenden Werte.
Rand und Polsterung
Abhängig vom Element wenden Browser möglicherweise Standardabstände und -ränder auf das Element an, um die Lesbarkeit zu verbessern. Normalerweise sehen wir dies bei Textelementen. Die Standardränder und -abstände für diese Elemente können von Browser zu Browser und von Element zu Element variieren. In Lektion 1 haben wir die Verwendung eines CSS-Resets besprochen, um alle diese Werte auf den Standardwert Null zu setzen. Dadurch können wir von Grund auf neu arbeiten und unsere eigenen Werte festlegen.
Marge
Mit der Eigenschaft „margin“ können wir den Abstand festlegen, der ein Element umgibt. Die Ränder liegen außerhalb jeglicher Grenzen und sind farblich völlig transparent. Sie können verwendet werden, um Elemente an einer bestimmten Stelle auf der Seite zu positionieren oder Leerraum hinzuzufügen und gleichzeitig alle anderen Elemente in sicherem Abstand zu halten. Hier ist die Margin-Eigenschaft in Aktion:
Div (Rand: 20px;)
Eine der Besonderheiten von margin besteht darin, dass die vertikalen Werte oben und unten nicht für Inline-Elemente, wohl aber für Block- und Inline-Block-Elemente gelten.
Polsterung
Die padding-Eigenschaft ist der margin-Eigenschaft sehr ähnlich, befindet sich jedoch innerhalb der Ränder des Elements. Die padding-Eigenschaft wird verwendet, um den Platz direkt innerhalb eines Elements anzugeben. Hier ist der Code:
Div (Auffüllung: 20px;)
Die padding-Eigenschaft funktioniert im Gegensatz zu margin vertikal für Inline-Elemente. Der vertikale Abstand kann mit der Linie oberhalb oder unterhalb des angegebenen Elements verschmelzen, wird jedoch angezeigt.
Rand und Polsterung für Inline-Elemente
Inline-Elemente verhalten sich in Bezug auf Abstand und Ränder etwas anders als Block- und Inline-Elemente. Bei Inline-Elementen funktioniert der Rand nur horizontal – links und rechts von den Elementen. Das Auffüllen funktioniert auf allen vier Seiten von Inline-Elementen, die vertikalen Ränder oben und unten können jedoch über die Linien oberhalb und unterhalb des Elements hinausragen.
Abstand und Ränder funktionieren wie gewohnt für Block- und Inline-Elemente.
Rand und Polsterung festlegen
In CSS gibt es mehrere Möglichkeiten, die Werte bestimmter Eigenschaften festzulegen. Wir können eine reguläre Notation verwenden, die mehrere Eigenschaften und Werte nacheinander auflistet, wobei jeder Wert seine eigene Eigenschaft hat. Oder wir können die Kurzschreibweise verwenden und mehrere Werte für dieselbe Eigenschaft auflisten. Nicht alle Eigenschaften verfügen über eine Abkürzung, daher müssen wir sicherstellen, dass wir die richtige Eigenschafts- und Wertstruktur verwenden.
Die Margin- und Padding-Eigenschaften gibt es in regulärer und verkürzter Form. Wenn wir die Abkürzungseigenschaft margin verwenden, um einen Wert für alle vier Seiten eines Elements festzulegen, legen wir einen Wert fest:
Div (Rand: 20px;)
Um einen Wert für die Ober- und Unterseite und einen anderen Wert für die linke und rechte Seite eines Elements festzulegen, geben Sie zwei Werte an: zuerst oben und unten, dann links und rechts. Hier für
Div (Rand: 10px 20px;)
Um eindeutige Werte für alle vier Seiten eines Elements festzulegen, geben Sie die Werte in der folgenden Reihenfolge an: oben, rechts, unten und links im Uhrzeigersinn. Hier bitten wir um
Div (Rand: 10px 20px 0 15px; )
Die Verwendung der Eigenschaft „margin“ oder „padding“ mit einer beliebigen Anzahl von Werten wird als Abkürzung betrachtet. In einem regulären Eintrag können wir mithilfe eindeutiger Eigenschaften den Wert nur für eine Seite festlegen. Nach jedem Eigenschaftsnamen (in diesem Fall Rand oder Auffüllung) gibt es einen Bindestrich und die Seite des Blocks, auf die der Wert angewendet werden soll: oben, rechts, unten oder links. Beispielsweise nimmt die Eigenschaft „padding-left“ nur einen Wert an und legt den linken Rand für dieses Element fest, die Eigenschaft „margin-top“ nimmt nur einen Wert an und legt den oberen Abstand für dieses Element fest.
Div (Rand oben: 10 Pixel; Polsterung links: 6 Pixel;)
Wenn wir nur einen Rand- oder Füllwert definieren möchten, ist es besser, die reguläre Notation zu verwenden. Dadurch bleibt unser Code klar und hilft dabei, Verwirrung zu vermeiden. Möchten Sie beispielsweise den Rand oben, rechts und links des Elements wirklich auf 0 festlegen oder möchten Sie den Rand unten wirklich auf 10 Pixel festlegen? Die Verwendung der regulären Notation für Eigenschaften und Werte hilft uns dabei, dies auf sinnvolle Weise zu tun. Wenn Sie es hingegen mit drei oder mehr Werten zu tun haben, ist die Kürzung äußerst nützlich.
Polsterung und Randfarbe
Die Rand- und Polstereigenschaften sind vollständig transparent und akzeptieren keine Farbwerte. Da sie jedoch transparent sind, zeigen sie die Hintergrundfarbe verwandter Elemente. Für den Rand sehen wir die Hintergrundfarbe des übergeordneten Elements und für die Polsterung sehen wir die Hintergrundfarbe des Elements, auf das die Polsterung angewendet wird.
Grenzen
Zwischen Polsterung und Rändern werden Ränder platziert, die einen Rahmen um ein Element bilden. Die Eigenschaft „Rahmen“ erfordert drei Werte: Breite, Stil und Farbe. Die Abkürzung für Rand wird in derselben Reihenfolge angegeben: Breite, Stil, Farbe. In normaler Notation lassen sich diese drei Werte in die Eigenschaften border-width, border-style und border-color zerlegen. Die reguläre Notation ist nützlich, um einen einzelnen Grenzwert zu ändern oder zu überschreiben.
Rahmenbreite und -farbe können mithilfe regulärer CSS-Größen- und Farbeinheiten definiert werden, wie in Lektion 3 beschrieben.
Universeller Selektor
Im ersten Schritt dieser Übung haben wir den universellen Selektor eingeführt. In CSS ist das Sternchen (*) ein universeller Selektor, der jedes Element auswählt. Anstatt alle einzelnen Elemente aufzulisten, können wir auch ein Sternchen verwenden, um alle Elemente auszuwählen.
Die in diesem Schritt ebenfalls erwähnten Pseudoelemente :before und :after sind Elemente, die dynamisch über CSS generiert werden können. Wir werden diese Elemente in unserem Projekt nicht verwenden, aber wenn wir von einem universellen Selektor sprechen, ist es auch eine gute Idee, diese Pseudoelemente einzubeziehen, falls sie jemals auftauchen.
Zusammenfassung
Nehmen Sie den Kuchen und klopfen Sie sich selbst auf den Kopf. Ich warte.
Das Erlernen aller verschiedenen Teile des Blockmodells ist keine leichte Aufgabe. Es hat ziemlich lange gedauert, diese Konzepte, selbst wenn sie nur kurz skizziert wurden, vollständig zu beherrschen, aber wir sind auf dem richtigen Weg.
Kurz gesagt, in dieser Lektion haben wir über Folgendes gesprochen:
- Wie verschiedene Elemente angezeigt werden.
- Was ist das Blockmodell und warum ist es so wichtig?
- So ändern Sie die Größe von Elementen basierend auf Höhe und Breite.
- So fügen Sie Elementen Ränder, Polsterungen und Ränder hinzu.
- So ändern Sie die Größe von Elementen und den Effekt des Boxmodells.
Wir haben jetzt ein besseres Verständnis dafür, wie Elemente gerendert und ihre Größen berechnet werden. Es ist Zeit, mit der Positionierung dieser Elemente fortzufahren.
