インタビューの質問: ホーリーグレイルレイアウトとダブルウィングレイアウトの違い

序文

今日は、聖杯レイアウトとダブルウィングレイアウト、そしてそれらの違いについてお話しします。この2つの3行レイアウトは、一部の大企業のフロントエンド面接で常に頻繁にテストされるポイントです。大企業の面接の質問についてお話ししましょう。さあ、始めましょう〜

レイアウト効果

ここに画像の説明を挿入

2 つの 3 行レイアウトは同じ効果があり、その効果は上の図に示されています。それぞれの特徴は次のとおりです。

ヘッダーとフッターの高さはブラウザ全体の幅になります。
中央に3列のレイアウトがあり、左右の幅は固定されています。
中央のコンテンツの幅は中央の位置を埋めるように適応し、高さは 3 つの列の最大の高さになります。実際には、聖杯レイアウトとダブルウィングレイアウトの処理は同じですが、中央の処理には若干の違いがあります。

予備処理

問題を回避するために、まず body に min-width: 600px を設定します。
次に、ヘッダーとフッターの幅を 100% (ブラウザページ全体) に設定し、区別しやすいように背景色を追加します。
コンテンツでは、左、右、中央に float:left 効果を追加し、左と右の幅と高さを設定します。
真ん中の幅は100%、高さは左右と同じにしています。また、効果が分かりやすいように背景色もつけています。
ここで注意すべき点が 1 つあります。コンテンツの高さも設定する必要があります。コンテンツ内の div に float:left 属性を追加したため、それらはすべてテキストフローの外側にあり、高さが崩れてしまいます。

(追記: この問題を解決するために、コンテンツに overflow: hidden を追加して BFC 領域を形成しました。興味のある友人は自分でそれについて学ぶことができます。もちろん、これを行わない場合は、コンテンツの高さを設定するだけです。)

*{
    マージン: 0;
    パディング: 0;
}
体{
    最小幅: 600px;
}
#ヘッダー、#フッター{
    高さ: 50px;
    幅: 100%;
    背景: グレー;
}
#中央、#左、#右
    フロート: 左;
}
＃コンテンツ{
    オーバーフロー: 非表示;
}
#左、#右{
    幅: 200ピクセル;
    高さ: 200px;
    背景: ピンク;
}
＃真ん中{
    幅: 100%;
    高さ: 200px;
    背景: 黄緑; 
}

ここに画像の説明を挿入

現在のページは次のようになっていることがわかりましたが、何が起こっているのでしょうか?

答えは簡単です。左、右、中央は一直線になるはずですが、コンテンツの幅が足りないため、左と右のボックスが押し下げられています。

それでは、これら 2 つのレイアウトと、この問題を解決する方法を見てみましょう。

聖杯レイアウト

まず、コンテンツのパディングを 0 200px に設定し、各側に 200px の幅を残します。
次に、2 つの領域に左と右の 2 つのボックスを配置するだけです。
最後に、左と右の余白プロパティをそれぞれ設定して位置を調整します。

＃コンテンツ{
    オーバーフロー: 非表示;
    パディング: 0 200px;
}
＃左{
    左マージン:-100% ;

} 
＃右{
    左マージン: -200px;

もう一度効果を見てみましょう

ここに画像の説明を挿入

チンチンチン、奇跡を目撃する時が来たよ〜

ここに画像の説明を挿入

ダブルウィングレイアウト

それでは、二重飛行翼レイアウトがこの問題をどのように解決するかを見てみましょう。下を見に来てください

ダブルウィングレイアウトでは、中央の下に中央内側ボックスを追加し、中央のコンテンツをこのボックス内に配置します (これは何の役に立つのでしょうか? 心配しないでください。読み進めてください)。
Holy Grailレイアウトと同様に、位置を調整するためにfloatとleftのマージン値も設定します。
ただし、このレイアウトでは左右の配置は必要ありません。

＃左{
    フロート: 左;
    左マージン: -100%;
}
＃右{
    フロート: 左;
    左マージン: -200px;
}
.middle-inner{
    パディング: 0 200px;
}

ここに画像の説明を挿入

この時点で、中央のコンテンツが消えていることがわかります。このとき、前に midlle に追加した midlle-inner ボックスが役立ちます。この時点で、このボックスに 0 200px のマージンを設定するだけで、コンテンツが中央に表示されます。

.middle-inner{
    マージン: 0 200px;
}

効果を見る

ここに画像の説明を挿入

やはり大企業の面接はこんな感じの質問が多いので、今日はこれで終わりにしましょう！！！！

総括する

最後にまとめます。Double Wing レイアウトの本質は、実は Holy Grail レイアウトと同じです。どちらも、負のマージンを設定することで要素の配置を実現します。

違いは HTML 構造です。ダブルウィングレイアウトでは、中央の要素内に mildle-inner を設定し、その左右のマージンを設定します (holy grail レイアウトの padding ではなく)。これにより、両側の要素の重なりがなくなります。
ダブルウィングレイアウトでは追加の HTML 構造を持つことができますが、左要素と右要素の位置を設定する必要はありません。

完全なコードは次のとおりです。

聖杯レイアウト

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <link rel="スタイルシート" href="style.css">
</head>
<本文>
    <div class="wrap">
        <div id="header">ヘッダー</div>
        <div id="コンテンツ">
            <div id="middle">
                真ん中
            </div>
            <div id="left">左</div>         
            <div id="right">右</div>
        </div>
        <div id="footer">フッター</div>
    </div>
</本文>
</html>

*{
    マージン: 0;
    パディング: 0;
}
体{
    最小幅: 600px;
}
#ヘッダー、#フッター{
    高さ: 50px;
    幅: 100%;
    背景: グレー;
}
#中央、#左、#右
    フロート: 左;
}
＃コンテンツ{
    オーバーフロー: 非表示;
    パディング: 0 200px;
}
#左、#右{
    幅: 200ピクセル;
    高さ: 200px;
    背景: ピンク;
}
＃真ん中{
    幅: 100%;
    高さ: 200px;
    背景: 黄緑; 
}
 ＃左{
    左マージン:-100% ;
    位置: 相対的;
    左:-200px;
} 
＃右{
    左マージン: -200px;
    位置: 相対的;
    左:200px; 
}

ダブルウィングレイアウト

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <link rel="スタイルシート" href="style.css">
</head>
<本文>
    <div class="wrap">
        <div id="header">ヘッダー</div>
        <div id="コンテンツ">
            <div id="middle">
                <div class="middle-inner">
                    真ん中
                </div>
            </div>
            <div id="left">左</div>         
            <div id="right">右</div>
        </div>
        <div id="footer">フッター</div>
    </div>
</本文>
</html>

*{
    マージン: 0;
    パディング: 0;
}
。包む{
    最小幅: 600px;
}
#ヘッダー、#フッター{
    高さ: 50px;
    幅: 100%;
    背景:グレー;
}
#左、#右{
    幅: 200ピクセル;
    高さ: 200px;
    背景: 緑;
}

＃真ん中{
    背景: ピンク;
    幅: 100%;
    フロート: 左;
    高さ:200px;
}
＃コンテンツ{
    オーバーフロー: 非表示;
}
＃左{
    フロート: 左;
    左マージン: -100%;
}
＃右{
    フロート: 左;
    左マージン: -200px;
}
.middle-inner{
    マージン: 0 200px;
}

インタビューで必ず聞かれる質問「ホーリーグレイルレイアウトとダブルフライングウィングレイアウトの違い」についての記事はこれで終わりです。ホーリーグレイルレイアウトとダブルフライングウィングレイアウトの違いについてさらに詳しく知りたい方は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: div+css3 を使用して背景グラデーションボタンを実装するためのサンプルコード

>>: HTML 要素の高さ、offsetHeight、clientHeight、scrollTop などの詳細な説明。