calc(), um einen Vollbild-Hintergrundinhalt mit fester Breite zu erreichen

In den letzten Jahren gab es im Webdesign einen Trend, den ich „Hintergrund in voller Breite und Inhalt mit fester Breite“ nenne. Einige typische Merkmale dieses Designs sind wie folgt.

Die Seite enthält mehrere große Blöcke, von denen jeder die gesamte Breite des Ansichtsfensters einnimmt und einen anderen Hintergrund hat.

Der Inhalt hat eine feste Breite. Auch wenn die Breite bei unterschiedlichen Auflösungen unterschiedlich ist, liegt dies nur daran, dass die Medienabfrage diesen Wert für die feste Breite ändert. In manchen Fällen kann der Inhalt verschiedener Blöcke auch unterschiedliche Breiten aufweisen.

Manchmal besteht die gesamte Webseite aus Inhalt mit fester Breite, der den gesamten Bildschirmhintergrund ausfüllt und aus mehreren Blöcken dieses Stils besteht. In den meisten Fällen wird jedoch nur ein bestimmter Bereich der Seite in diesem Stil gestaltet, am häufigsten die Navigation oder die Fußzeile.

Um diesen Designstil zu erreichen, besteht die gängigste Methode darin, zwei Elementebenen für jeden Block vorzubereiten: Die äußere Ebene wird verwendet, um den Vollbildhintergrund zu erreichen, und die innere Ebene wird verwendet, um den Inhalt mit fester Breite zu erreichen. Letzteres wird durch margin: auto horizontal zentriert. Beispielsweise würde der Strukturcode einer Fußzeile mit diesem Design normalerweise wie folgt lauten:

<Fußzeile>
<div Klasse="Wrapper">
<!-- Hier kommt der Inhalt der Fußzeile hin-->
</div>
</Fußzeile>

Verwenden Sie CSS, um diese beiden Elementebenen gleichzeitig zu formatieren:

Fußzeile {
Hintergrund: #333;
}
.wrapper {
maximale Breite: 900px;
Rand: 1em automatisch;
}

Kommt Ihnen bekannt vor, oder? Derzeit schreiben die meisten Front-End-Ingenieure so. Ist es notwendig, eine zusätzliche Elementebene hinzuzufügen, um diesen Effekt zu erzielen? Können wir dieses Durcheinander mit Hilfe modernen CSS vollständig beseitigen?

Lassen Sie uns zunächst darüber nachdenken, welche Rolle margin: auto in diesem Szenario spielt. Die durch diese Deklaration erstellten linken und rechten Ränder entsprechen tatsächlich der halben Ansichtsfensterbreite abzüglich der halben Inhaltsbreite. Da Prozentsätze hier basierend auf der Ansichtsfensterbreite interpretiert werden (vorausgesetzt, keine Vorgängerelemente haben eine explizite Breite), können wir diesen Randwert als 50 % – 450 Pixel ausdrücken. Glücklicherweise definiert CSS3 eine solche calc()-Funktion, die es uns ermöglicht, den Wert der Eigenschaft mit dieser einfachen Formel direkt in CSS anzugeben. Wenn calc() statt auto verwendet wird, ändert sich der Stil dieses inneren Containers zu:

.wrapper {
maximale Breite: 900px;
Rand: 1em berechnet (50 % – 450 Pixel);
}

Der einzige Grund, ein Containerelement in die Fußzeile einzufügen, besteht darin, seinem Rand das magische Schlüsselwort „auto“ zuzuweisen, um eine horizontale Zentrierung des Inhalts zu erreichen. Jetzt haben wir jedoch dieses magische Auto durch calc() ersetzt und dieser neue Wert kann tatsächlich als allgemeiner CSS-Längenwert auf jede Eigenschaft angewendet werden, die einen Längenwert akzeptiert. Dies bedeutet, dass wir diesen Längenwert bei Bedarf auch auf die Polsterung des übergeordneten Elements anwenden können und der Gesamteffekt unverändert bleibt:

Fußzeile {
maximale Breite: 900px;
Polsterung: 1em berechnet (50 % – 450 Pixel);
Hintergrund: #333;
}
.wrapper {}

Nach dieser Transformation haben wir den gesamten CSS-Code aus dem inneren Container entfernt. Mit anderen Worten: Es muss nicht wirklich am Layout beteiligt sein und wir können es problemlos aus dem Strukturcode entfernen. Schließlich haben wir den gewünschten Designstil auf einer reinen und nicht redundanten HTML-Struktur erreicht. Gibt es Raum für weitere Optimierung dieser Lösung? Das stimmt. Sie müssen glauben, dass das Streben nach Exzellenz endlos ist!

Wenn Sie die Breitendeklaration auskommentieren, werden Sie feststellen, dass sie keine Auswirkung hat. Der visuelle Effekt ist unabhängig von der Ansichtsfenstergröße genau derselbe. Warum ist das so? Denn bei einem Padding von 50 % – 450 Pixel – bleiben nur 900 Pixel (2×450 Pixel) verfügbarer Platz für den Inhalt übrig. Nur wenn wir die Breite explizit auf einen anderen Wert als 900 Pixel (oder größer oder kleiner) einstellen, können wir einen Unterschied erkennen. Da die gewünschte Inhaltsbreite 900px beträgt, ist diese Deklarationszeile eigentlich überflüssig. Wir können sie entfernen, um den Code übersichtlicher zu gestalten.

Ein weiterer Bereich, der optimiert werden kann, ist das Hinzufügen eines Fallback-Stils zur Verbesserung der Abwärtskompatibilität. Auf diese Weise können wir zumindest ein relativ sinnvolles Padding erreichen, auch wenn der Browser calc() nicht unterstützt:

Fußzeile {
Polsterung: 1em;
Polsterung: 1em berechnet (50 % – 450 Pixel);
Hintergrund: #333;
}

Endlich ist es geschafft. Wir haben redundante Tags weggelassen, drei Zeilen CSS-Code verwendet und schließlich dieses perfekte Ergebnis erzielt: flexibler Stil, prägnanter Code und gute Kompatibilität!

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.