Layouts können in CSS eine der schwierigsten Aufgaben sein, obwohl sie zweifellos eine der wichtigsten sind. In diesem Schnelltipp werden der normale Dokumentenfluss beschrieben und wie er Sie bei Ihren Layouts unterstützen kann.
Einführung
Bevor ich erkläre, was der normale Dokumentenfluss bedeutet, muss ich die verschiedenen Arten von HTML-Elementen und deren standardmäßige Anzeige erläutern.
Wir werden uns auf die zwei Haupttypen von HTML-Elementen konzentrieren, nämlich "Block-Level" - und "Inline" -Elemente. Seit der Einführung von HTML5 gibt es eine spezifischere Elementkategorisierung (Phrasierung, Fluss und Abschnittsweise), obwohl Browser sich immer noch effektiv an die Block- und Inline-Definitionen anlehnen.
Dies ist ein Beispiel für mehrere Inline-Elemente alles in einem Absatz enthalten, einschließlich eines Ankers eine Spanneund ein Schwerpunkt-Tag.Wenn Sie die Größe des Browsers ändern, sehen Sie, wie ein Browser diese Inline-Elemente standardmäßig behandelt. Das ist richtig, alles wird in einer Zeile angezeigt und umbrochen, wenn kein Platz mehr vorhanden ist.
Sehen Sie diese Inline-Element-Demo in Aktion.
Elemente auf Blockebene, wie z divs und Absätze sowie neuere HTML5-Mitglieder wie Artikel und Sektion, haben standardmäßig sehr unterschiedliche Eigenschaften. Elemente auf Blockebene enthalten normalerweise, jedoch nicht immer, Inlineelemente oder andere Elemente auf Blockebene. Betrachten Sie sie als das "strukturelle" Element der beiden.
Browser formatieren (standardmäßig) Elemente auf Blockebene mit einem Zeilenumbruch davor und danach. Mit anderen Worten, Elemente auf Blockebene beginnen immer auf einer neuen Zeile (stapeln wie Blöcke), sofern nicht anders angegeben.
Styling
In allen Fällen können Sie die Anzeige eines Elements mithilfe der Anzeigeeigenschaft CSS ändern:
Element Anzeige: Block; / * oder Inline, zum Beispiel * /
Diese Anzeigeeigenschaften bestimmen auch, was wir sonst noch gestalten können. Wir können beispielsweise die Breite und Höhe eines Elements auf Blockebene bestimmen, nicht jedoch bei Inline-Elementen. Füllungen und Ränder können auf Inline-Elemente angewendet werden. Sie haben jedoch keinen Einfluss auf die Abmessungen des übergeordneten Elements. Sehen Sie sich dieses Beispiel an, um zu sehen, was ich meine:
Die Anderen
Neben den allgemeinen Attributen für Block- und Inline-Anzeigen gibt es einige weniger häufig anzutreffende Beispiele. Was ist beispielsweise, wenn Sie ein Element inline anzeigen möchten, es aber wie ein Element auf Blockebene gestalten möchten? Geben Sie das ein Inline-Block Wert. Inline-Block-Elemente behalten Eigenschaften wie Breite, Höhe, Rand und Abstand bei der Anwendung auf Blockebenen-Elemente bei, während die strukturellen Eigenschaften eines Inline-Elements erhalten bleiben.
Inline-Block ist eine mögliche Alternative zu Floating-Elementen, ist aber unter diesen Umständen sicherlich nicht ohne Probleme.
Ein weiterer Anzeigewert, der nicht so gut verwendet wird, ist Listenpunkt, was genau das macht, was auf der Dose steht. Jedes Element, auf das der Listenelementwert angewendet wird, wird vertikal angezeigt, wie Sie es von einer Liste erwarten würden, es befinden sich jedoch auch Aufzählungspunkte daneben. Dies ist nützlich zum Auflisten von Daten, d. H. Einer Liste von Namen, und ist logisch, wie Listenelemente wie diese aufgelistet werden:
Charles Mahogany Biggins
Tiggy Wiggins Hydrangea
Foxy Bumpkins Numpty
werden standardmäßig angezeigt.
Der letzte erwähnenswerte Anzeigewert ist 'none'. Können Sie sich vorstellen, was es tut? Das ist richtig, jedes Element, dessen Anzeigeeigenschaft auf "none" gesetzt ist, wird einfach nicht auf der Seite angezeigt. Es wird visuell (zusammen mit allen darin enthaltenen Elementen) aus dem Dokument entfernt. Das Markup für dieses Element wird immer noch an den Browser gesendet, es generiert jedoch keine Box und wird für die Ansicht ausgeblendet - Bildschirmleser können es auch nicht abrufen. Es nimmt keinerlei Platz ein, also können andere Elemente seinen Platz einnehmen.
Was ist also der normale Dokumentenfluss??
Auf diese Weise wird eine Seite dargestellt, wenn Sie beim strukturellen Styling nichts dagegen tun.
Was genau ist der normale Dokumentenfluss in Anbetracht dessen? Auf diese Weise wird eine Seite dargestellt, wenn Sie beim strukturellen Styling nichts dagegen tun. Browser zeigen den Inhalt in der Reihenfolge an, in der er gefunden wurde. Top-Sachen zuerst, Inhalt weiter unten.
Wenn Menschen erstmalig mit Webdesign beginnen, versuchen sie oft, alle möglichen Tricks anzugehen, ohne die Grundlagen und Grundlagen zu erlernen. Wenn Sie den normalen Dokumentenfluss verstehen, sind Ihre Webdesigns dafür umso besser!
Übung: Der Markup
Beginnen wir mit der Erstellung einer einfachen Fotogalerie mit sehr einfachem CSS. Ich habe schnell eine HTML-Datei erstellt, um uns an den Start zu bringen, schließlich konzentrieren wir uns hauptsächlich auf das Styling. Kopieren Sie den folgenden Code in Ihren Texteditor, und ich erkläre, was da drin ist.
Normaler Dokumentenfluss
Eine Einführung in den normalen Dokumentenfluss.
Willkommen in meiner Fotogalerie!
Ich bin der Mann ohne Namen, Zapp Brannigan! Bender, Gott zu sein, ist nicht einfach. Wenn Sie zu viel tun, werden die Menschen von Ihnen abhängig und wenn Sie nichts tun, verlieren sie die Hoffnung. Sie müssen eine leichte Berührung verwenden. Wie ein Safecracker oder ein Taschendieb. Hey, rate mal, wozu du Zubehör hast. Leela, Bender, wir gehen ernsthaft aus. Auch Zoidberg. Ach je! Sie steckt in einer Endlosschleife und er ist ein Idiot! Nun, das ist Liebe zu dir.
Kann ich die Waffe benutzen? Ach nein! Der Professor wird mich schlagen! Aber wenn Zoidberg es "repariert"… dann vielleicht Geschenke! Braten! Hör auf, das Richtige zu tun, du Idiot! Wer ist mutig genug, in etwas zu fliegen, das wir alle als Todessphäre bezeichnen? Ich habe nicht viel von etwas gefühlt, seit mein Meerschweinchen starb.
Oben befindet sich ein leerer CSS-Block. Hier beginnen wir mit dem Styling. Darunter befindet sich ein bedingter Link zum HTML5-Shiv-Skript, mit dem Internet Explorer HTML5-Elemente erkennen und richtig anzeigen kann. Darunter der obligatorische Body-Tag. Innerhalb des body-Tags befindet sich der Container für die gesamte Seite und auch einer für die Fotogalerie. Ich habe placekitten verwendet, um Platzhalterbilder zu erhalten, und Fillerama für Fülltext. Das ist es also.
OK, also, um nur zu zeigen, wie der normale Dokumentenfluss funktioniert, werfen Sie einen Blick auf die gerade erstellte Seite. Genau so, wie Sie es erwarten würden? Die Bilder werden in einer Zeile angezeigt, bis die Breite des übergeordneten Elements, in diesem Fall die Zahl (auf 100% des Ansichtsfensters festgelegt, jedoch standardmäßig mit einigen Rändern) gefüllt ist. Und obwohl Sie es noch nicht sehen können, befinden sich alle Block-Level-Elemente wie div, figur und article in einer eigenen Zeile.
Dies ist der normale Dokumentenfluss in Aktion. Ändern Sie jetzt die Größe des Browsers für eine Sekunde. Ja, es ist fließend! Na ja vielleicht nicht vollständig fließend, wie wir es verstanden haben - die Bilder behalten ihre Abmessungen unabhängig vom Ansichtsfenster. Ihre Layouts sind jedoch standardmäßig immer flüssig.
Übung: Das Basic CSS
Um zu beweisen, dass ich mich nicht mit Elementen auf Blockebene beschäftige, lassen Sie uns einige Hintergrundfarben hinzufügen. Fügen Sie in Ihrem CSS-Codeblock am oberen Rand der HTML-Datei Folgendes hinzu:
Nachdem Sie nun einige Hintergrundfarben hinzugefügt haben, überprüfen Sie das Ergebnis. Es sollte ersichtlich sein, wie Elemente auf Blockebene angezeigt werden.
Übung: Das Layout CSS
Das folgende Styling enthält nur CSS-Eigenschaften aus dem Box-Modell (Breite, Rand, Auffüllung usw.), zeigt jedoch, wie wenig CSS mit soliden Layouts erstellt werden kann.
In dieser CSS haben wir die Breite des Containers auf 65% festgelegt. Wir hätten auch einen festen Pixelwert verwenden können, aber Prozentsätze behalten die fließende Natur des Dokuments bei und demonstrieren den Dokumentenfluss effektiver. Wir haben die Seite auch mit zentriert Marge: 0 auto.
Beim Rest geht es um Ästhetik. Ich habe ein paar Füllungen hinzugefügt, um alles etwas Atempause zu geben, die Schriftarten und Schriftfarben spezifiziert, das war's.
Speichern Sie das Dokument und zeigen Sie es in Ihrem Browser an.
Immer wenn ich an einem Projekt arbeite, denke ich immer darüber nach, wie es im normalen Dokumentenfluss aussehen würde. Dadurch kann ich darüber nachdenken, wie ich es mit so wenig CSS wie möglich verbessern kann.
Fazit
Versuchen Sie, nach den Prinzipien, die wir heute gelernt haben, eigene Beispiele zu erstellen. Sie werden feststellen, dass Sie (strukturell) viel erreichen können, bevor Sie sich mit den technischen Eigenschaften von Schwimmern und der Positionierung beschäftigen.
Zusätzliche Ressourcen
Inline-Elemente im Mozilla Developer Network
Elemente auf Blockebene im Mozilla Developer Network
Visuelles Formatierungsmodell von W3C
Die Anzeigedeklaration für QuirksMode
CSS Display: Inline-Block: Warum es rockt und warum es saugt von Robert Nyman
Was ist der Deal mit Display: Inline-Block? von Josh Johnson
Verwenden Sie keine Anzeige: Keine, um Inhalte, die für Bildschirmleseprogramme bestimmt sind, auf der 456 Berea St.
Accentsconagua
Share
