Einige gängige CSS-Layouts (Zusammenfassung)

Zusammenfassung

In diesem Artikel werden die folgenden gängigen Layouts vorgestellt:

Es gibt viele Möglichkeiten, ein dreispaltiges Layout zu implementieren. Dieser Artikel konzentriert sich auf das Holy Grail-Layout und das Double Wings-Layout. Mehrere andere Möglichkeiten, ein dreispaltiges Layout zu erreichen

1. Einspaltiges Layout

Es gibt zwei gängige einspaltige Layouts:

• Einspaltiges Layout mit gleicher Breite für Kopf-, Inhalts- und Fußzeile
• Ein einspaltiges Layout mit gleicher Breite für Kopf- und Fußzeile und etwas schmalerem Inhalt

1. So implementieren Sie

Bei der ersten Methode stellen Sie zunächst die Breite von Kopf-, Inhalts- und Fußzeile auf 1000 Pixel oder auf max. Breite: 1000 Pixel ein (der Unterschied zwischen beiden besteht darin, dass bei einer Bildschirmgröße unter 1000 Pixeln bei ersterer Methode eine Bildlaufleiste vorhanden ist, bei letzterer jedoch nicht, und die tatsächliche Breite angezeigt wird). Stellen Sie dann den Rand auf „auto“ ein, um eine Zentrierung zu erreichen.

<div Klasse="Header"></div>
<div Klasse="Inhalt"></div>
<div Klasse="Fußzeile"></div>

Beim zweiten Typ ist die Inhaltsbreite von Kopf- und Fußzeile nicht festgelegt und die Blockebenenelemente füllen den gesamten Bildschirm aus. Die Inhaltsbereiche von Kopf-, Inhalts- und Fußzeile sind jedoch auf die gleiche Breite festgelegt und werden über margin:auto zentriert.

.header{
    Rand: 0 automatisch; 
    maximale Breite: 960px;
    Höhe: 100px;
    Hintergrundfarbe: blau;
}
.Inhalt{
    Rand: 0 automatisch;
    maximale Breite: 960px;
    Höhe: 400px;
    Hintergrundfarbe: Aquamarin;
}
.Fußzeile{
    Rand: 0 automatisch;
    maximale Breite: 960px;
    Höhe: 100px;
    Hintergrundfarbe: Aqua;
}

2. Zweispaltiges adaptives Layout

Bei einem zweispaltigen adaptiven Layout wird eine Spalte durch Inhalt gestreckt, während die andere Spalte die verbleibende Breite ausfüllt.

1.float+überlauf:versteckt

Wenn es sich um ein normales zweispaltiges Layout handelt, kann dies durch den Rand von Float + normalen Elementen erreicht werden. Wenn es sich jedoch um ein adaptives zweispaltiges Layout handelt, kann dies durch die Verwendung von Float + Overflow: Hidden erreicht werden. Diese Methode löst BFC hauptsächlich durch Überlauf aus, und BFC überlappt keine schwebenden Elemente. Da das Festlegen von „overflow:hidden“ die Eigenschaft „haslayout“ des IE6-Browsers nicht auslöst, müssen Sie „zoom:1“ festlegen, um mit dem IE6-Browser kompatibel zu sein. Der spezifische Code lautet wie folgt:

<div Klasse="übergeordnet" Stil="Hintergrundfarbe: hellgrau;">
    <div Klasse="links" Stil="Hintergrundfarbe: hellblau;">
        <p>links</p>
    </div>
    <div Klasse="rechts" Stil="Hintergrundfarbe: hellgrün;">
        <p>richtig</p>
        <p>richtig</p>
    </div>        
</div>

.übergeordnet {
  Überlauf: versteckt;
  Zoom: 1;
}
.links {
  schweben: links;
  Rand rechts: 20px;
}
.Rechts {
  Überlauf: versteckt;
  Zoom: 1;
}

Hinweis: Wenn sich die Seitenleiste rechts befindet, achten Sie auf die Rendering-Reihenfolge. Das heißt, schreiben Sie in HTML zuerst die Seitenleiste und dann den Hauptinhalt.

2.Flexibles Layout

Flex-Layout, auch Elastic-Box-Layout genannt, kann das Layout verschiedener Seiten mit nur wenigen einfachen Codezeilen realisieren.

//Der HTML-Teil ist der gleiche wie oben.parent {
  Anzeige: Flex;
}  
.Rechts {
  Rand links: 20px; 
  biegen: 1;
}

3. Rasterlayout

Das Rasterlayout ist ein zweidimensionales, rasterbasiertes Layoutsystem zur Optimierung des Benutzeroberflächendesigns.

//Der HTML-Teil ist der gleiche wie oben.parent {
  Anzeige: Raster;
  Rastervorlagenspalten: auto 1fr;
  Gitterabstand: 20px
}

3. Dreispaltiges Layout

Merkmale: Die mittlere Spalte hat eine adaptive Breite und die beiden Seiten haben eine feste Breite

1. Heiliger Gral-Layout

① Funktionen

Ein spezielleres dreispaltiges Layout hat ebenfalls feste Breiten auf beiden Seiten und eine adaptive Breite in der Mitte. Der einzige Unterschied besteht darin, dass die DOM-Struktur zuerst die mittlere Spalte schreiben muss, damit die mittlere Spalte zuerst geladen werden kann.

.container {
    padding-left: 220px; // Platz für die linke und rechte Spalte schaffen padding-right: 220px;
  }
  .links {
    schweben: links;
    Breite: 200px;
    Höhe: 400px;
    Hintergrund: rot;
    Rand links: -100 %;
    Position: relativ;
    links: -220px;
  }
  .Mitte {
    schweben: links;
    Breite: 100 %;
    Höhe: 500px;
    Hintergrund: gelb;
  }
  .Rechts {
    schweben: links;
    Breite: 200px;
    Höhe: 400px;
    Hintergrund: blau;
    Rand links: -200px;
    Position: relativ;
    rechts: -220px;
  }

 <Artikelklasse="Container">
    <div Klasse="Mitte">
      <h2>Heiliger Gral-Layout</h2>
    </div>
    <div Klasse="links"></div>
    <div Klasse="rechts"></div>
  </Artikel>

② Implementierungsschritte

Alle drei Teile sind so eingestellt, dass sie linksschweben. Andernfalls kann der Inhalt auf der linken und rechten Seite nicht nach oben verschoben werden und steht nicht in derselben Zeile wie die mittlere Spalte. Stellen Sie dann die Breite der Mitte auf 100 % ein (um adaptiven Inhalt in der mittleren Spalte zu erzielen). Zu diesem Zeitpunkt springen die linken und rechten Teile in die nächste Zeile.

Wenn Sie den linken Rand auf einen negativen Wert setzen, kehren der linke und der rechte Teil zur gleichen Linie wie der mittlere Teil zurück.

Lassen Sie durch Festlegen der linken und rechten Polsterung des übergeordneten Containers Lücken auf der linken und rechten Seite.

Durch die Einstellung der relativen Positionierung werden die linken und rechten Teile zu beiden Seiten verschoben.

③ Nachteile

Die Mindestbreite des Mittelteils darf nicht kleiner sein als die Breite des linken Teils, da sonst der linke Teil in die nächste Zeile fällt

Wenn die Höhe einer Spalte erweitert wird (wie unten gezeigt), werden die Hintergründe der anderen beiden Spalten nicht automatisch ausgefüllt. (Dies kann durch ein Layout gleicher Höhe mit positiver Polsterung + negativem Rand gelöst werden, was weiter unten vorgestellt wird.)

2. Doppelflügelige Anordnung

① Funktionen

Es verfügt außerdem über ein dreispaltiges Layout, das basierend auf dem Holy Grail-Layout weiter optimiert ist, wodurch das Problem der Holy Grail-Layout-Unordnung gelöst und die Trennung von Inhalt und Layout erreicht wird. Und jede Spalte kann problemlos die höchste Spalte sein.

 .container {
        min-width: 600px; //Sorge dafür, dass der Inhalt in der Mitte angezeigt werden kann, doppelte linke Breite + rechte Breite}
    .links {
        schweben: links;
        Breite: 200px;
        Höhe: 400px;
        Hintergrund: rot;
        Rand links: -100 %;
    }
    .Mitte {
        schweben: links;
        Breite: 100 %;
        Höhe: 500px;
        Hintergrund: gelb;
    }
    .Mitte .inner {
        Rand: 0 200px; //Neu hinzugefügter Teil}
    .Rechts {
        schweben: links;
        Breite: 200px;
        Höhe: 400px;
        Hintergrund: blau;
        Rand links: -200px;
    }

   <Artikelklasse="Container">
        <div Klasse="Mitte">
            <div class="inner">Doppelflügel-Layout</div>
        </div>
        <div Klasse="links"></div>
        <div Klasse="rechts"></div>
    </Artikel>

② Implementierungsschritte (die ersten beiden Schritte sind dieselben wie beim Holy Grail-Layout)

• Alle drei Teile werden so eingestellt, dass sie nach links schweben, und dann wird die Breite der Mitte auf 100 % eingestellt. Zu diesem Zeitpunkt springen die linken und rechten Teile zur nächsten Zeile.
• Wenn Sie den linken Rand auf einen negativen Wert setzen, kehren der linke und der rechte Teil zur gleichen Linie wie der mittlere Teil zurück.
• Fügen Sie dem mittleren Teil ein inneres Div hinzu und legen Sie den Rand fest: 0 200px;

③ Nachteile

Durch Hinzufügen einer weiteren Ebene von DOM-Baumknoten erhöht sich der zum Generieren des Rendering-Baums erforderliche Rechenaufwand.

3. Vergleich zweier Methoden zur Layoutimplementierung:

• Beide Layoutmethoden platzieren die Hauptspalte an den Anfang des Dokumentflusses, sodass die Hauptspalte zuerst geladen wird.
• Auch in der Implementierung ähneln sich die beiden Layoutmethoden: Beide lassen drei Spalten schweben und bilden dann durch negative Ränder ein dreispaltiges Layout.
• Der Unterschied zwischen den beiden Layoutmethoden liegt in der Handhabung der Position der mittleren Hauptspalte: Das Holy Grail-Layout verwendet die linke und rechte Polsterung des übergeordneten Containers + die relative Positionierung zweier untergeordneter Spalten;
  

Das Doppelflügel-Layout besteht darin, die Hauptspalte in einem neuen übergeordneten Block zu verschachteln und die linken und rechten Ränder der Hauptspalte zum Anpassen des Layouts zu verwenden.

4. Gleichhohes Layout

Mit „Layout gleicher Höhe“ ist die Layoutmethode gemeint, bei der untergeordnete Elemente die gleiche Höhe wie das übergeordnete Element haben. Als nächstes stellen wir mehrere gängige Implementierungsmethoden vor:

1. Verwenden Sie positive Polsterung + negativen Rand

Den zweiten Mangel des Holy Grail-Layouts können wir lösen, indem wir ein gleichmäßiges Layout verwenden, da der Hintergrund im Füllbereich angezeigt wird. Legen Sie einen großen Füllbereich unten fest, legen Sie einen negativen Rand unten mit demselben Wert fest, fügen Sie außerhalb aller Spalten einen Container hinzu und legen Sie „overflow:hidden“ fest, um den überlaufenden Hintergrund abzuschneiden. Mit dieser Methode können Sie ein mehrspaltiges Layout mit gleicher Höhe und auch Trennlinien zwischen den Spalten erzielen. Sie hat eine einfache Struktur und ist mit allen Browsern kompatibel. Der neue Code lautet wie folgt:

   .Center,
      .links,
      .Rechts {
        Polsterung unten: 10000px;
        Rand unten: -10000px;
      }
      .container {
        Polsterung links: 220px;
        Polsterung rechts: 220px;
        overflow: hidden; //Den Überlauf-Hintergrund abschneiden} 

2. Hintergrundbilder verwenden

Diese Methode ist die erste Methode, die wir verwendet haben, um Spalten gleicher Höhe zu erzielen. Dabei wird ein Hintergrundbild verwendet und dieses Hintergrundbild auf dem übergeordneten Element der Spalte verwendet, um die Y-Achse anzuordnen, wodurch die Illusion gleich hoher Spalten entsteht. Die Implementierungsmethode ist einfach und weist eine hohe Kompatibilität auf. Sie kann problemlos ohne zu viele CSS-Stile implementiert werden, ist jedoch nicht für Layouts mit vielen Spalten wie etwa fließende Layouts geeignet.

Bevor Sie einen Stil erstellen, benötigen Sie ein Hintergrundbild ähnlich dem folgenden:

<div Klasse="Container Clearfix">
    <div Klasse="links"></div>
    <div Klasse="Inhalt"></div>
    <div Klasse="rechts"></div>
</div>

.container {
  Hintergrund: URL("column.png") Wiederholung-y;
  Breite: 960px;
  Rand: 0 automatisch;
}
.links {
  schweben: links;
  Breite: 220px;
}
.Inhalt {
  schweben: links;
  Breite: 480px;
}
.Rechts {
  schweben: links;
  Breite: 220px;
}

3. Tabellenlayout nachahmen

Dies ist eine sehr einfache und leicht umzusetzende Methode. Allerdings ist die Kompatibilität schlecht und es kann in IE6-7 nicht normal ausgeführt werden.

 <div Klasse="Containertabelle">
      <div Klasse="ContainerInner TableRow">
        <div Klasse="Spalte tableCell Zelle1">
          <div Klasse="beiseite gelassen">
            ....
          </div>
        </div>
        <div Klasse="Spalte tableCell Zelle2">
          <div Klasse = "Inhaltsabschnitt">
            ...
          </div>
        </div>
        <div Klasse="Spalte tableCell Zelle3">
          <div Klasse="direkt beiseite">
            ...
          </div>
        </div>
      </div>
    </div>

.Tisch {
  Breite: automatisch;
  Mindestbreite: 1000px;
  Rand: 0 automatisch;
  Polsterung: 0;
  Anzeige: Tabelle;
}
.tableRow {
  Anzeige: Tabellenzeile;
}
.tableCell {
  Anzeige: Tabellenzelle;
  Breite: 33%;
}
.Zelle1 {
  Hintergrund: #f00;
  Höhe: 800px;
}
.Zelle2 {
  Hintergrund: #0f0;
}
.Zelle3 {
  Hintergrund: #00f;
}

4. Verwenden Sie Ränder und Positionierung

Bei diesem Ansatz werden Ränder und absolute Positionierung verwendet, um den Eindruck gleich hoher Spalten zu erwecken. Es ist einfach aufgebaut, mit allen Browsern kompatibel und leicht zu beherrschen. Angenommen, Sie müssen ein zweispaltiges Layout gleicher Höhe implementieren, bei dem die Höhe der Seitenleiste der Höhe des Hauptinhalts entspricht.

#Wrapper {
  Breite: 960px;
  Rand: 0 automatisch;
}
#Hauptinhalt {
  Rahmen rechts: 220px durchgezogen #dfdfdf;
  Position: absolut;
  Breite: 740px;
  Höhe: 800px;  
  Hintergrund: grün;
}
#Seitenleiste {
  Hintergrund: #dfdfdf;
  Rand links: 740px;
  Position: absolut;
  Höhe: 800px;
  Breite: 220px;
}

5. Klebriges Layout

1. Funktionen

• Es gibt einen Inhaltsblock <main> . Wenn die Höhe von <main> lang genug ist, folgt das Element <footer> , das auf <main> folgt, dem Element <main> .
• Wenn das <main> -Element kurz ist (beispielsweise kleiner als die Bildschirmhöhe), erwarten wir, dass das <footer> -Element am unteren Bildschirmrand „klebt“.

Der spezifische Code lautet wie folgt:

 <div id="wrap">
      <div Klasse="Haupt">
        Haupt- <br />
        Haupt- <br />
        Haupt- <br />
      </div>
    </div>
    <div id="footer">Fußzeile</div>

  * {
        Rand: 0;
        Polsterung: 0;
      }
      html,
      Körper {
        Höhe: 100%; //Die Höhe wird Schicht für Schicht vererbt}
      #wickeln {
        Mindesthöhe: 100 %;
        Hintergrund: rosa;
        Textausrichtung: zentriert;
        Überlauf: versteckt;
      }
      #wrap .main {
        Polsterung unten: 50px;
      }
      #Fußzeile {
        Höhe: 50px;
        Zeilenhöhe: 50px;
        Hintergrund: Dunkelrosa;
        Textausrichtung: zentriert;
        Rand oben: -50px;
      }

2. Schritte zur Umsetzung

(1) Der Footer muss eine eigenständige Struktur sein und darf keine Verschachtelungsbeziehung zum Wrap haben.

(2) Die Höhe des Wrap-Bereichs wird durch die Einstellung der Mindesthöhe auf die Höhe des Ansichtsfensters geändert.

(3) Der Fußbereich sollte zur Bestimmung seiner Position einen negativen Rand verwenden

(4) Padding-Bottom muss im Hauptbereich eingestellt werden. Dadurch soll auch verhindert werden, dass die Fußzeile aufgrund negativer Ränder den eigentlichen Inhalt verdeckt.

Überarbeitet am 2.1.2019. Wenn Sie diesen Artikel hilfreich finden, liken und folgen Sie bitte meinem GitHub-Blog. Vielen Dank!

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.