Interviewfragen: Der Unterschied zwischen dem Holy Grail-Layout und dem Double-Wing-Layout

Vorwort

Heute werde ich Ihnen ein Holy-Grail-Layout und ein Double-Wing-Layout und den Unterschied zwischen ihnen vorstellen. Diese beiden dreizeiligen Layouts waren in einigen großen Unternehmen schon immer hochfrequente Testpunkte für Front-End-Interviews. Lassen Sie mich Ihnen die Interviewfragen großer Unternehmen vorstellen. Lassen Sie uns ohne weitere Umschweife loslegen~

Layout-Effekt

Die beiden dreireihigen Layouts haben die gleiche Wirkung. Die Auswirkungen sind in der Abbildung oben dargestellt. Ihre Merkmale sind:

• Die Höhe der Kopf- und Fußzeile entspricht der Breite des gesamten Browsers.
• In der Mitte befindet sich ein dreireihiges Layout und die Breite links und rechts ist festgelegt.
• Die Breite des mittleren Inhalts ist adaptiv, um die mittlere Position auszufüllen, und die Höhe ist die maximale Höhe der drei Spalten. Tatsächlich ist die Verarbeitung des Holy Grail-Layouts und des Doppelflügel-Layouts gleich, aber es gibt einige geringfügige Unterschiede bei der Verarbeitung in der Mitte.

Vorverarbeitung

• Um Probleme zu vermeiden, legen wir zunächst eine Mindestbreite von 600 Pixeln für den Text fest.
• Stellen Sie dann die Breite der Kopf- und Fußzeile auf 100 % (die gesamte Browserseite) ein und fügen Sie eine Hintergrundfarbe hinzu, um die Unterscheidung zu erleichtern.
• Im Inhalt fügen wir links, rechts und in der Mitte den Float:Left-Effekt hinzu und legen die Breite und Höhe links und rechts fest.
• Die Breite in der Mitte ist auf 100 % eingestellt und die Höhe entspricht der Höhe links und rechts. Damit der Effekt leichter zu erkennen ist, geben wir ihnen außerdem eine Hintergrundfarbe.
• Hier müssen wir eines beachten. Wir sollten auch eine Höhe für den Inhalt festlegen. Wir haben dem Div im Inhalt das Attribut float:left hinzugefügt, sodass sie alle außerhalb des Textflusses liegen, was zu einem Höhenabfall führt.
  

(P.S.: Ich habe im Inhalt „overflow: hidden“ hinzugefügt, um einen BFC-Bereich zu bilden und dieses Problem zu lösen. Interessierte Freunde können sich selbst darüber informieren. Wenn Sie dies nicht tun, legen Sie einfach die Höhe des Inhalts fest.)

*{
    Rand: 0;
    Polsterung: 0;
}
Körper{
    Mindestbreite: 600px;
}
#Kopfzeile,#Fußzeile{
    Höhe: 50px;
    Breite: 100 %;
    Hintergrund: grau;
}
#Mitte,#Links,#Rechts
    schweben: links;
}
#Inhalt{
    Überlauf: versteckt;
}
#links rechts{
    Breite: 200px;
    Höhe: 200px;
    Hintergrund: rosa;
}
#Mitte{
    Breite: 100 %;
    Höhe: 200px;
    Hintergrund: gelbgrün; 
}

Wir haben festgestellt, dass die aktuelle Seite so aussieht. Was ist also los?

Die Antwort ist einfach. Links, rechts und Mitte sollten eine gerade Linie bilden, aber die Breite des Inhalts reicht nicht aus, sodass die linken und rechten Felder zusammengedrückt werden.

Schauen wir uns nun diese beiden Layouts an und wie sich dieses Problem lösen lässt:

Heiliger Gral-Layout

Wir legen zunächst eine Polsterung für den Inhalt fest: 0 200 px, sodass auf jeder Seite eine Breite von 200 px verbleibt.
Als nächstes müssen wir nur noch die beiden Kästchen links und rechts in den beiden Bereichen platzieren.
Legen Sie abschließend die Randeigenschaften für links bzw. rechts fest, um die Position anzupassen.

#Inhalt{
    Überlauf: versteckt;
    Polsterung: 0 200px;
}
#links{
    Rand links: -100 %;

} 
#Rechts{
    Rand links: -200px;

Schauen wir uns die Wirkung noch einmal an

Ding, ding, ding, es ist Zeit, das Wunder zu erleben~

Doppelflügel-Layout

Sehen wir uns dann an, wie das Doppelflügler-Layout dieses Problem löst. Komm und schau nach unten

Beim Doppelflügel-Layout wird unter der Mitte eine mittlere Innenbox hinzugefügt und der Inhalt der Mitte in diese Box eingefügt (was soll das? Keine Sorge, lesen wir weiter).
Genau wie im Holy Grail-Layout legen wir auch Randwerte für Float und Left fest, um die Position anzupassen.
Eine Positionierung für links und rechts ist bei dieser Anordnung allerdings nicht erforderlich.

#links{
    schweben: links;
    Rand links: -100 %;
}
#Rechts{
    schweben: links;
    Rand links: -200px;
}
.mitte-inner{
    Polsterung: 0 200px;
}

Zu diesem Zeitpunkt stellen wir fest, dass der Inhalt in der Mitte verschwunden ist. Zu diesem Zeitpunkt ist die mittlere innere Box, die wir zuvor in der Mitte hinzugefügt haben, praktisch. Zu diesem Zeitpunkt müssen wir nur einen Rand von 0 200 Pixel für diese Box festlegen, damit unser Inhalt in der Mitte angezeigt wird.

.mitte-inner{
    Rand: 0 200 px;
}

Sehen Sie die Wirkung

Genau wie wir erwartet haben, lauten die Interviewfragen bei großen Unternehmen genau wie diese, also machen wir Schluss für heute! ! ! !

Um zusammenzufassen

Lassen Sie uns abschließend zusammenfassen. Das Wesen des Double Wing Layouts ist eigentlich dasselbe wie das des Holy Grail Layouts. Beide erreichen die Anordnung der Elemente durch das Festlegen negativer Ränder.

• Der Unterschied liegt in der HTML-Struktur. Das Double-Wing-Layout setzt ein Mildle-Inner innerhalb des mittleren Elements und legt dessen linken und rechten Rand fest, anstatt die Polsterung des Holy-Grail-Layouts, um die Überlappung der Elemente auf beiden Seiten zu vermeiden.
• Das Doppelflügel-Layout kann eine zusätzliche HTML-Struktur aufweisen, es ist jedoch nicht erforderlich, die Positionierung der linken und rechten Elemente festzulegen.

Hier ist der vollständige Code:

Heiliger Gral-Layout

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
    <link rel="stylesheet" href="style.css">
</Kopf>
<Text>
    <div Klasse="wrap">
        <div id="header">Kopfzeile</div>
        <div id="Inhalt">
            <div id="Mitte">
                Mitte
            </div>
            <div id="links">links</div>         
            <div id="right">richtig</div>
        </div>
        <div id="footer">Fußzeile</div>
    </div>
</body>
</html>

*{
    Rand: 0;
    Polsterung: 0;
}
Körper{
    Mindestbreite: 600px;
}
#Kopfzeile,#Fußzeile{
    Höhe: 50px;
    Breite: 100 %;
    Hintergrund: grau;
}
#Mitte,#Links,#Rechts
    schweben: links;
}
#Inhalt{
    Überlauf: versteckt;
    Polsterung: 0 200px;
}
#links rechts{
    Breite: 200px;
    Höhe: 200px;
    Hintergrund: rosa;
}
#Mitte{
    Breite: 100 %;
    Höhe: 200px;
    Hintergrund: gelbgrün; 
}
 #links{
    Rand links: -100 %;
    Position: relativ;
    links: -200px;
} 
#Rechts{
    Rand links: -200px;
    Position: relativ;
    links: 200px; 
}

Doppelflügel-Layout

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
    <link rel="stylesheet" href="style.css">
</Kopf>
<Text>
    <div Klasse="wrap">
        <div id="header">Kopfzeile</div>
        <div id="Inhalt">
            <div id="Mitte">
                <div Klasse="Mitte-Innen">
                    Mitte
                </div>
            </div>
            <div id="links">links</div>         
            <div id="right">richtig</div>
        </div>
        <div id="footer">Fußzeile</div>
    </div>
</body>
</html>

*{
    Rand: 0;
    Polsterung: 0;
}
.wickeln{
    Mindestbreite: 600px;
}
#Kopfzeile,#Fußzeile{
    Höhe: 50px;
    Breite: 100 %;
    Hintergrund: grau;
}
#links rechts{
    Breite: 200px;
    Höhe: 200px;
    Hintergrund: grün;
}

#Mitte{
    Hintergrund: rosa;
    Breite: 100 %;
    schweben: links;
    Höhe: 200px;
}
#Inhalt{
    Überlauf: versteckt;
}
#links{
    schweben: links;
    Rand links: -100 %;
}
#Rechts{
    schweben: links;
    Rand links: -200px;
}
.mitte-inner{
    Rand: 0 200 px;
}

Damit ist der Artikel über die Frage, die man im Vorstellungsgespräch unbedingt stellen muss, abgeschlossen: der Unterschied zwischen dem Holy Grail-Layout und dem Double-Flying-Wing-Layout. Weitere Informationen zum Unterschied zwischen dem Holy Grail-Layout und dem Double-Flying-Wing-Layout finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!