. Beim Bau eines Gebäudes ist es mit Ziegeln vergleichbar. Es stellt zwar die Grundlage und das Design der Website dar, ist jedoch nicht die einzige. Wie Türen, Fenster, Lüftung, Balkone und dergleichen werden auch andere HTML-Elemente für das Layout verwendet. Dabei handelt es sich um Links, Formulare, Bilder, Listen und Tabellen.
ermöglichte es uns, den Code kompakter und klarer zu gestalten. Der Übergang zum Blocklayout ermöglichte es, HTML von unnötigen Dingen, nämlich Stilen, zu befreien. Ermöglichte die vollständige Entfernung des überladenen und schwer zu navigierenden Tabellenlayouts.
Verwendet aktiv das CSS-Blocklayout. Mit den verfügbaren Tools können Sie jedes beliebige Seitenlayout pixelgenau erstellen. Dieses Layout wird als pixelgenau bezeichnet. Dies setzt eine perfekte Übereinstimmung zwischen der Website und dem Layout voraus. Das Foto oben zeigt, dass beim Blocklayout nicht alles so einfach ist. Anfangs war es einfach unmöglich, auf Tische zu verzichten. Diese wurden verwendet, um das Hauptlayout der Seiten zu erstellen, und Blöcke wurden für einzelne Elemente verwendet. Dies war so, bis sie lernten, wie man die Höhe von Blöcken einstellt.
Vorteile
Das Block-Website-Layout bietet folgende Vorteile:
Weitere Entwicklung
Derzeit ist das Block-Div-Layout veraltet und kann nur begrenzt verwendet werden, nur als Sonderfall für bestimmte Situationen. Es wurde durch Positionierung und Fluss im Layout ersetzt. Sie hatten viele Mängel, aber im Großen und Ganzen ermöglichten sie mehr als nur eine Blockanordnung.
Als nächstes folgte die Konstruktion mit Inline-Block-Elementen. Dies erleichterte die Arbeit der Programmierer erheblich. Diese Methode nutzt beide Arten von Blöcken und ermöglicht Ihnen die Erstellung eines reaktionsfähigeren und anpassungsfähigeren Designs. Es ist erwähnenswert, dass alle diese Methoden auf die eine oder andere Weise aus einem div-Element bestanden, was ihr den Namen „wunderbares Layout“ einbrachte.
Derzeit werden Flex-Box und Bootstrap zum Erstellen der Seite verwendet. Sie reduzieren den Code erheblich und machen es schneller und einfacher, hochwertiges Responsive Design zu erstellen. Sie ermöglichen das Verschieben von Blöcken, ohne die gesamte Seite zu zerstören.
An der Spitze des Fortschritts steht eine neue Technologie – Grids. Damit können Sie sehr schnell und einfach ein Design beliebiger Komplexität erstellen. Und Blöcke, Fluss, Positionierung, wie es früher bei Tabellen der Fall war, werden nur für den vorgesehenen Zweck verwendet.
Das Div-Layout ist ein aktuelles Modell für die Website-Erstellung.
Im Internet erscheinen ständig neue Seiten – Nachrichtenportale, Blogs und persönliche Seiten. Fast jeder von ihnen wird auf Basis eines Blockmodells erstellt, dessen Basis DIV-Blöcke sind. Heute werden wir diese Technologie verstehen und die wichtigsten Nuancen des Div-Layouts betrachten.
HTML-Dokumentstrom
Wenn wir uns daran erinnern, dass die HTML-Sprache es Ihnen ermöglicht, Hypertext-Informationen zu strukturieren, wird klar, dass jede Site im Kern aus einer Reihe von Blöcken besteht: Bildern, Text, Links usw. Wir sprechen im Moment nicht speziell über DIVs, aber es handelt sich um eng verwandte Themen.
Wir haben also einen bestimmten Datenstrom, aus dem die HTML-Seite zusammengestellt wird. Derzeit gibt es zwei Arten von Strukturelementen: Block und Inline. Blockblöcke sind in einem normalen HTML-Stream einer nach dem anderen in vertikaler Reihenfolge angeordnet. Gleichzeitig nimmt die Blockbreite standardmäßig den gesamten verfügbaren Platz relativ zur Seite oder zum übergeordneten Element ein. Inline-Elemente werden wiederum horizontal nacheinander angeordnet.
Die Hauptvertreter dieser beiden Kategorien sind div- und span-Tags.
Wenn es sich also um einen normalen HTML-Fluss handelt, befinden sich alle div-Blöcke untereinander und der Span befindet sich in einer Zeile.
Wie Sie wissen, können Sie mithilfe von Inline-Elementen kein normales Markup für eine Website erstellen. Daher entschied man sich vor einigen Jahren für die Verwendung eines auf DIV-Blöcken basierenden Layouts, um das Tabellenlayout zu ersetzen.
DIV-Website-Layout
Daher begann man, DIV-Blöcke zum Markieren der Site zu verwenden. Mit ihnen war es möglich, das Hauptlayout zu zeichnen und zusätzliche Blöcke für alle erforderlichen Inhaltstypen zu erstellen.
Schauen wir uns diesen Vorgang am Beispiel einer Standardseite an, die eine Kopfzeile, einen Inhaltsblock, eine Seitenleiste und eine Fußzeile enthält.
Dies ist eine klassische Option. Das Logo befindet sich am häufigsten in der Kopfzeile der Website und Navigationslinks im Seitenblock. Der Hauptblock dient der Anzeige von Informationen – Artikeln, Firmenbeschreibungen, Fotoarchiven usw. Im unteren Block können Sie eine Adresse, Kontakte und weitere Serviceinformationen einfügen.
Wie Sie im Bild sehen können, verwenden wir für die Gestaltung des Layouts die folgenden Hauptblöcke:
Der Hauptblock dient als Container für alle Inhalte. Header – Site-Header. Nav – Navigationsblock. Inhalt – grundlegende Informationen und Inhalte. Fußzeile – Fußzeile der Website.
Jeder dieser Blöcke ist ein DIV-Container. Aber theoretisch sollten die Blöcke aufeinander folgen. Wir müssen das oben besprochene Layout erhalten, damit die Blöcke die folgende Struktur haben:
Und außerdem würden sie auf der Seite genauso platziert sein, wie wir es auf der Vorlage sehen. Wie können wir das erreichen? Zu diesem Zweck verwenden wir Eigenschaften für die DIV-Blöcke, die es uns ermöglichen, sie in der gewünschten Weise relativ zueinander und zur Seite als Ganzes zu positionieren.
Aber zuerst erstellen wir die HTML-Basis unseres Layouts und geben den Blöcken Namen, damit wir mit Stylesheets arbeiten können.
HTML-Framework
Wenn wir alle Service-Tags überspringen, sieht das Grundgerüst unserer Website so aus.
Für jeden Block haben wir eine Klasse zugewiesen. Mit seiner Hilfe legen wir Stile für den Block fest – das hilft uns, die gewünschte Position auf der Seite zu erreichen.
Es ist an der Zeit, sich mit den Stilen und Eigenschaften vertraut zu machen, die für das div-Layout der Site verwendet werden.
CSS-Stile
Falls es jemand noch nicht weiß: CSS-Stylesheets werden schon seit langem in der Website-Entwicklung verwendet. Mit ihrer Hilfe können Sie jedes Element auf der Seite ändern. Dies gilt sowohl für die optische Gestaltung des Blocks als auch für seine Lage und Größe.
Schweben
Werfen wir zunächst einen Blick auf die Eigenschaft, mit der Sie ein DIV rechts oder links von der Seite oder relativ zu seinem übergeordneten Container positionieren können.
Ein kleiner Rückzugsort. Immer wenn wir einem Block einen Stil zuweisen, ändert er seine Eigenschaften (Größe, Position) relativ zum übergeordneten Container.
Die Eigenschaft float hat vier Werte: none, right, left, inherit.
Uns interessiert die Bedeutung von „links“ und „rechts“.
Der Float-Wert gibt an, auf welcher Seite unser Block angezeigt wird. Alle anderen Blöcke werden von der gegenüberliegenden Seite umströmt.
In unserem Fall müssen wir für den Navigationsblock den Wert left und für den Hauptinhalt den Wert right angeben. So wird es in der Style-Datei aussehen:
Nav ( float:left; ) .content ( float:right; )
Sie können die Eigenschaft übrigens nur für den Navigationsblock festlegen. Der Inhaltsblock wird automatisch rechts neben der Navigation platziert. Dies wird durch den Float erreicht, der durch Festlegen der Float-Eigenschaft erhalten wird.
Ränder in CSS: Rand und Polsterung
Lassen Sie uns nun zwei wichtige Eigenschaften verstehen, die im div-basierten Layout verwendet werden. Sie sind für die Einrückung verantwortlich. Am einfachsten lässt sich das Wesentliche ihrer Arbeit anhand eines Beispiels verstehen.
Stellen wir uns vor, was wir tun müssen, damit unser Hauptblock MAIN eine leichte Einrückung vom Site-Header hat. Dies kann erreicht werden, indem dem Div mit der Hauptklasse eine Margin-Eigenschaft zugewiesen wird. Es ist für die äußere Polsterung des Blocks verantwortlich.
Die Margin-Eigenschaft hat die folgenden Werte: [Wert | Interesse | auto] (1,4) | erben.
Somit können Sie für jede Seite nacheinander den Versatz in Pixeln und in Prozent angeben.
Es ist möglich, nur einen bestimmten Einzug festzulegen, beispielsweise auf der Oberseite. Das ist genau unser Fall. So wird es umgesetzt:
Haupt ( margin-top:10px; )
Jetzt wird unser Hauptblock eine obere Auffüllung von 10 Pixeln haben.
Lassen Sie uns nun einen Block mit Navigation und Inhalt entwerfen. Stellen Sie sich vor, wir hätten bereits eine fertige Website. Alle Links in der Navigation befinden sich am linken Rand der Seite. Und der Text im Inhaltsblock grenzt im Gegenteil eng an die rechte Seite. Ziemlich unangenehmes Design. Wir müssen eine Innenpolsterung vornehmen.
Verantwortlich dafür ist die Eigenschaft padding, die folgende Werte hat: [Wert | Prozent] (1, 4) | erben
Das Prinzip ist hier dasselbe wie bei der Eigenschaft margin – Sie können den Einzug für jede Seite separat festlegen.
Nav ( float:left; padding-left: 15px; ) .content ( float:right; padding-right: 20px; )
Mithilfe dieser Grundeigenschaften können Sie das gewünschte Layout von DIV-Blöcken erreichen. Als Ergebnis erhalten Sie ein fertiges Website-Layout und müssen es nur noch mit den notwendigen Informationen füllen.
Video zum Artikel:
Abschluss
Wir haben nur die Grundeigenschaften betrachtet. In Wirklichkeit gibt es noch viel mehr davon. In jedem Fall werden die bereitgestellten Informationen jedoch immer im div-Layout verwendet.
Warum auf anderen Seiten nach Informationen suchen, wenn hier alles gesammelt ist?
Die Artikelserie des Autors ist diesem Thema gewidmet Grundlagen des Block-Website-Layouts. Dies ist der erste Ort, um mit dem Studium des Themas zu beginnen. Website-Erstellung. Die Lektionen werden für diejenigen nützlich sein, die die Grundlagen erlernen möchten HTML und CSS nicht nur in der Theorie, sondern auch in der Praxis.
Während wir uns mit dem Thema befassen, werden wir eine Website erstellen, eine normale Website, ohne besonderen Schnickschnack, aber ganz nett.
In den Lektionen spreche ich einfach und klar über blockbasiertes Website-Layout und mehr. Wenn Sie schnell die Grundlagen verstehen möchten Website-Layouts Dann ist diese Artikelserie genau das Richtige für Sie.
Was ist Blocklayout?
Was Website-Layout blockieren und womit isst man es?
Bisher wurden Websites mithilfe von Tabellen gestaltet. Jedes Element der Seite, sei es ein Titel, ein Text oder ein Bild, befand sich in einer eigenen Zelle. Diese Zellen schwärmten in anderen, größeren Zellen, und diese wiederum lagen in der Hauptzelle, also auf der Seite der Site selbst.
Das tabellarische Layout ist mittlerweile veraltet, obwohl viele Webmaster es weiterhin verwenden. Sein großer Nachteil ist der umfangreiche Code. Schließlich muss jede kleine Zelle mit bestimmten Tags gekennzeichnet werden.
Blocklayout- ein ganz anderes Lied. Hier befinden sich alle Seitenelemente in speziellen Blöcken namens divs. Im Kern ähneln sie den gleichen Tabellen. Auch in Afrika ist eine Kiste eine Kiste. Aber Blöcke sind viel bequemer, einfacher und funktionaler.
Block Im Website-Layout ist dies ein regelmäßiger rechteckiger Bereich, der über eine Reihe von Eigenschaften verfügt, wie zum Beispiel: Rahmen, Ränder und Einzüge. Der Inhalt des Blocks kann alles sein – ein Text, ein Bild, eine Liste, ein auszufüllendes Formular, ein Navigationsmenü usw.
Rahmen- Dies ist der Umriss eines Blocks, für den Sie Eigenschaften wie Dicke, Farbe und Typ (gepunktet, einfarbig, gepunktet) festlegen können.
Felder (Auffüllen)- Trennen Sie den Inhalt des Blocks von seinem Rahmen, sodass der Text beispielsweise nicht „an die Wände des Blocks stößt“.
Ränder– Dies ist der leere Raum zwischen verschiedenen Blöcken, der es ermöglicht, zwei Blöcke in einem bestimmten Abstand relativ zueinander zu positionieren.
Blöcke werden wie Tabellen immer vertikal auf der Seite angeordnet. Das heißt, wenn im Seitencode zwei Blöcke hintereinander geschrieben werden, werden diese im Browser untereinander angezeigt. Wenn wir mehrere Blöcke horizontal in einer Zeile anordnen müssen, legen wir in ihren Eigenschaften einen Parameter fest wie „ umfließen"(schweben). Aber dazu später mehr.
Blocklayout der Site. Stichworte
Etikett ist eine spezielle Konstruktion der HTML-Sprache. Unterscheiden Öffnung Und Schließen Stichworte. Verwechseln Sie sie nicht mit Hashtags aus sozialen Netzwerken oder Tags auf Websites, das sind verschiedene Dinge!
Im einfachsten Fall ist ein Tag wie ein Teil eines Kinderbaukastens, der einen eigenen, strengen Zweck hat: Eine Stange bedeutet eine Stange, ein Rad bedeutet ein Rad und sonst nichts. Zum Beispiel ein Absatz-Tag:
Absatztext.
wird immer mit dem Buchstaben p und nichts anderem bezeichnet. Das ist sein Name.
Tags werden immer in spitze Klammern eingeschlossen. Wie Sie dem Beispiel entnehmen können, gibt es ein öffnendes und ein schließendes Tag. Dem schließenden Tag wird vor dem Namen ein Schrägstrich hinzugefügt – ein Schrägstrich / .
Nicht alle Tags haben ein schließendes Paar. Das Bild-Tag img hat es beispielsweise überhaupt nicht. Um aber modernen Standards und den Anforderungen der XHTML-Spezifikation zu entsprechen, fügen sie vor der schließenden spitzen Klammer noch ein Leerzeichen mit Schrägstrich ein. Es sieht ungefähr so aus:
div-Tag
Das div-Tag ist die Grundlage des Blocklayouts. Dies sind genau die Würfel, aus denen die gesamte Website aufgebaut ist. Dieses Tag ist neutral. Im Gegensatz zu Standard-HTML-Tags, die streng an ihren Inhalt gebunden sind (p – an Absätze, a – an Links, img – an Bilder), kann das div-Tag alles und so viel davon enthalten, wie Sie möchten. Betrachten Sie es wie eine große Kiste, in der alle Spielsachen entsorgt werden.
Zur Definition wird das div-Tag verwendet Funktionsbereiche auf der Seite. Zum Beispiel: „Kopfzeile“, Navigationsblock, Hauptinhaltsblock, „Fußzeile“ oder unserer Meinung nach Fußzeile.
Das div-Tag hat wie jedes andere Tag seine eigenen Attribute.
Attribut- beschreibende Merkmale des Tags. Das heißt, was er tun kann und wie. Nehmen wir zum Beispiel ein Bild-Tag:
In diesem Fall sind src, width, height und alt Tag-Attribute. In Anführungszeichen (und dies ist auch eine zwingende Anforderung moderner Standards) sind angegeben Werte Attribute.
Es ist nicht schwer, eine solche Aufzeichnung zu entziffern. Das Tag weist darauf hin, dass Sie an dieser Stelle der Seite das Bild risunok.jpg aus dem Bilderordner anhängen müssen. Die Breite des Bildes beträgt 200 Pixel, die Höhe 50 Pixel. Und dem Heap wurde alternativer Text hinzugefügt, der erklärt, was im Bild gezeigt wird.
Alternativtext ist übrigens keine Laune, sondern eine notwendige Voraussetzung. Nicht alle Internetnutzer haben ein gutes Sehvermögen. Jemand verwendet ein Texterkennungs- und Leseprogramm. Und manche Leute schalten einfach die Anzeige von Bildern im Browser aus. Deshalb gibt es alternative Bildunterschriften für Zeichnungen.
Wenn es keinen Sinn macht, sie zu signieren (z. B. eine Listenmarkierung oder eine Art Pfeil), bleibt im Alt-Attribut ein Leerzeichen zwischen den Anführungszeichen.
div-Tag-Attribute
Das div-Tag hat nur zwei Attribute:
id – ein Attribut, das Ihnen die Zuweisung ermöglicht einzigartig Wert, also der Wert, der auf der Seite verwendet wird nur einmal. Zum Beispiel Kopf- oder Fußzeile.
Auf diese Weise können wir im Stylesheet weitere Einstellungen für das div-Tag mit dem id-Attribut und dem Header-Wert vornehmen und ganz andere für den Footer. Und der Browser erkennt korrekt, dass dieser Text zur „Kopfzeile“ gehört und beispielsweise in großer und roter Schrift eingegeben wird, dieser jedoch zur „Fußzeile“ gehört und in kleiner und grauer Schrift eingegeben wird. Und keine Verwirrung!
Klasse ist ein Attribut, mit dem Sie mehreren Elementen denselben Wert zuweisen können. Fügen Sie beispielsweise allen Bildern auf der Seite einen Rahmen mit der gleichen Dicke und Farbe hinzu. Da es mehrere Bilder gibt, kann das id-Attribut nicht mehr verwendet werden, daher verwenden wir class .
Zum ersten Mal denke ich, dass das reicht. Wenn etwas über das Blocklayout von Websites unklar ist, fragen Sie in den Kommentaren nach.
Fortsetzung folgt. In Kontakt bleiben!
Das Layout mit div-Blöcken ist längst zum Standard geworden und bietet gegenüber dem tabellarischen Layout eine Reihe von Vorteilen. In Wirklichkeit sind unerfahrene Entwickler jedoch verwirrt über das Verhalten dieser Blöcke.
Schauen wir uns die Hauptpunkte des Blocklayouts an. Jetzt werden wir nicht den HTML5-Standard berücksichtigen, sondern uns lediglich mit den Grundlagen des Layouts mit div-Blöcken befassen, das beim Erstellen eines Layouts oder einer einzelnen Seitenkomponente verwendet wird.
Was gilt als Blockelement?
Der Bereich eines solchen Elements auf der Seite wird durch ein Rechteck dargestellt; standardmäßig nimmt es die gesamte verfügbare Breite ein und beginnt in einer neuen Zeile.
Das im Blocklayout am häufigsten verwendete Element ist das Universalelement
.
Also von einfach bis komplex. Sehen wir uns an, wie Divs standardmäßig angezeigt werden, ohne dass Stile ihre Position beeinflussen. Der Übersichtlichkeit halber werden wir über das style-Attribut Stile zu Elementen inline hinzufügen.
Block 1
Block 2
Block 3
Fügen wir für jeden Block einen Breitenwert hinzu:
Block 1
Block 2
Block 3
Es ist ersichtlich, dass sich jeder Block gemäß der Spezifikation in einer neuen Zeile befindet. Das ist ihr normales Verhalten.
Nun stellt sich die Frage, wie man positioniert div-Blöcke in einer Zeile, einer nach demanderen?
Zu diesem Zweck gibt es eine Eigenschaft, die bestimmt, auf welcher Seite der Block zur Ausrichtung gezwungen wird. Gleichzeitig kann es von der anderen Kante aus andere Elemente umströmen.
Die Eigenschaft float hat folgende Bedeutung:
- links – der Block ist am linken Rand ausgerichtet und fließt nach rechts
- rechts – der Block ist am rechten Rand ausgerichtet und fließt nach links
- none – es ist kein Wrapping angegeben, der Block verhält sich standardmäßig wie in den vorherigen Beispielen.
Fügen wir float:left zu unseren Blöcken hinzu, sodass die Blöcke links ausgerichtet sind:
Block 1
Block 2
Block 3
Dadurch wurden die Blöcke auf einer Linie aufgereiht. Okay, nehmen wir an, wir wollten unten ein weiteres Div hinzufügen und tun dies, ohne die Float-Eigenschaft anzugeben:
Block 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Block 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Block 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Einheit 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Block 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Block 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Block 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Einheit 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Warum ist das passiert? Kurz gesagt, dies geschieht, weil schwebende Elemente aus dem Dokumentfluss fallen. Dies ist jedoch ein Thema für einen separaten Artikel. Hier machen wir uns mit der neuen Eigenschaft vertraut, die das Verhalten schwebender Elemente steuert:
- links – deaktiviert den Umbruch auf der linken Seite, alle Elemente werden in einer neuen Zeile (unter dem Element) angezeigt.
- rechts – verhindert, dass das Element auf der rechten Seite umwickelt wird
- Both – verbietet das Umschließen eines Elements auf beiden Seiten. Es wird empfohlen, diese Funktion zu verwenden, wenn Sie das Element eindeutig in einer neuen Zeile anzeigen müssen oder nicht bekannt ist, auf welcher Seite andere Elemente umschlossen werden können
Fügen wir Block 4 die Eigenschaft „clear:left“ hinzu, die verhindert, dass dieses Element um andere schwebende Elemente auf der linken Seite herumfließt.
Block 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Block 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Block 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Einheit 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Block 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Block 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Block 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Einheit 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Block 4 wird nach Bedarf in eine neue Zeile eingefügt.
In diesem Fall wissen wir, wie sich andere Blöcke befinden, daher haben wir im Beispiel sofort „clear:left“ angegeben. Es gibt Situationen, in denen wir nicht genau wissen, auf welche Seite der schwebende Block treffen wird. In solchen Fällen lohnt es sich daher, „clear:both“ anzugeben, wodurch der Fluss auf beiden Seiten abgebrochen wird. Jetzt haben wir herausgefunden, wie man Div-Blöcke horizontal auf einer Zeile positioniert.
Beachten Sie, dass Float-Blöcke in derselben Zeile platziert werden, sofern die Breite des übergeordneten Elements dies zulässt. Wenn Blockelemente nicht in eine Zeile passen, werden sie in eine neue Zeile umgebrochen. Wenn dies beispielsweise beim Layouten von Layouts von entscheidender Bedeutung ist, müssen Sie dies berücksichtigen und bei Blöcken mit Float unbedingt die Breite festlegen – fest (px) oder Gummi (%, rem usw.). Schauen wir uns als nächstes solche Situationen an.
Wie können wir die Blöcke beeinflussen, wenn wir diese Blöcke in der Mitte platzieren möchten?
Die klassische Lösung wäre, den Blöcken ein übergeordnetes Element hinzuzufügen und die Eigenschaft margin: 0 auto; zu verwenden.
Warum haben wir dem übergeordneten Element den class.wrapper gegeben? „Wrapper“ bedeutet „Verpackung“. Es ist eine Art allgemein akzeptierte Praxis, den Namen der Klasse zu definieren, damit ein Element andere Blöcke umschließt und dadurch ermöglicht, dass sie durch Ändern des übergeordneten Elements selbst gesteuert/beeinflusst werden.
Nehmen wir das Markup aus den vorherigen Beispielen und verbessern es.
Block 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Block 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Block 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Einheit 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Block 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Block 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Block 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Einheit 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Hier scheint alles einfach zu sein.
Und wenn es uns nicht gefällt, dass der Text eng am Rand des übergeordneten Blocks klebt und wir Felder hinzufügen möchten, ohne Änderungen am Markup vorzunehmen, sondern nur mit CSS. Fügen wir den Elementen die Eigenschaft padding hinzu:
Block 1. Lorem
Block 2. Lorem ipsum
Block 3. Lorem ipsum
Block 4. Lorem
Und wir sehen, dass unser Layout auseinandergefallen ist! Block 3 ist irgendwo verschwunden. Warum ist das passiert? Die Antwort ist einfach. Durch das Hinzufügen von Feldern zu den Elementen haben wir deren Breite erhöht. Nun sind die Werte:
Block 1: 10 + 200 + 10 = 220px
Block 2: 10 + 150 + 10 = 170px
Block 3: 10 + 100 + 10 = 120px
Block 4: 10 + 450 + 10 = 470px
220 + 170 + 120 = 510 Pixel
Die Gesamtbreite der drei Blöcke beträgt 510, sie passen nicht in die Breite des übergeordneten Blocks (450) und werden daher in eine neue Zeile übertragen.
Wie man es repariert? Sie können Folgendes tun:
- Setzen Sie die Breitenwerte für jeden Block unter Berücksichtigung der Ränder zurück. Durch Reduzierung der Blockgrößen. Alles passt wieder sauber in eine Zeile. Sind Sie der Meinung, dass dies unbequem ist? Jedes Mal, wenn ich in das Layout einsteige und etwas bearbeite.
- Verwenden Sie die Box-Sizing-Eigenschaft: border-box. Damit die Berechnung von der Gesamtbreite des Blocks ausgeht. Ich rate Ihnen, herauszufinden, was das CSS-Blockmodell ist.
Mit der zweiten Option sieht es so aus:
Block 1. Lorem
Block 2. Lorem ipsum
Block 3. Lorem ipsum
Block 4. Lorem
Block 1. Lorem
Block 2. Lorem ipsum
Block 3. Lorem ipsum
Block 4. Lorem
Lassen Sie uns nun alle Informationen, die wir erhalten haben, zusammenfassen und versuchen, ein einfaches dreispaltiges Standardlayout mit flexiblem Layout zu erstellen, das sich auf maximal 900 Pixel ausdehnt, wonach das gesamte Layout in der Mitte positioniert wird.
Erstellen Sie das Layout-Markup:
Dokumentieren
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ich werde es nicht mehr erwarten, es wird dringend erwartet, den Lebenslauf abzuwehren, ohne es zu beeilen, ohne dass es so weit ist. Soluta velit eos, quia. Fugiat voluptates nisi aliquid eum sapiente sunt nobis, adipisci vermutenda earum!
Wir schreiben Stile:
Body ( max-width: 900px; /* maximale Breite begrenzen */ margin: 0 auto; ) /* für alle Blöcke innerhalb des Körpers den Algorithmus zur Berechnung der Blockbreite ändern und 10 Pixel Ränder zu allen Blöcken hinzufügen */ body div ( - webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 10px; ) .header (hintergrund: #CCA69E; padding: 10px; ) .left- Seitenleiste ( Breite: 20 %; Hintergrund: #8ED9B6; Float: links; ) .content ( Float: links; Breite: 60 %; ) .right-sidebar ( Breite: 20 %; Hintergrund: #FF9282; Float: links; ) .footer (Hintergrund: #000; klar: beide; /* Umbruch auf beiden Seiten deaktivieren, der Block wird in einer neuen Zeile angezeigt */ Farbe: #ccc; )
Wenn etwas unklar ist, fragen Sie in den Kommentaren nach.
Es könnte nützlich sein zu lesen: