聖杯レイアウト——前端の白編に向けて

聖杯レイアウトとは
3つのバーのレイアウト構造は、左と右のバーの幅が固定され、中間のバーの幅が自動的に塗りつぶされ、親要素の幅が変化するにつれて変化します.
図に示すように

headerとfooterの幅はスクリーン

全体に埋め込まれている.

スクリーンを縮小または拡大し、左欄と右欄の幅は変わらず、中間の幅は小さくなるか大きくなるにつれて

になる.
次に、この効果を実現しましょう.
Dom構造

"header">header
    
"container">
        
"center" class="column">center
        
"left" class="column">left
        
"right" class="column">right
    

解析:

はheaderとfooterの2つのHTML 5の意味化ラベルを使用しており、意味化ラベルはseo

に有利である.

centerブロックをleftブロックの前に置くのはcenterブロックをより速くロードするため(DOMロードは順番にロードされる)

である.

center、left、rightは、共通のcssスタイル

があるため、同じclass名を使用しています.
CSSスタイル
最初のステップ
ヘッダーとfooterの幅を100%、左欄幅200 px、右欄幅300 px、中間欄幅100%(ブラウザの幅に合わせて変化するため)に設定します.

body {
    width: 100%;
    margin: 0;  //        margin  
}

#header,
#footer {
    width: 100%;
    background-color: #ccc;
}

#container {
    width: 100%;
    background-color: yellow;
}

#container .column {
    height: 200px;
}

#left {
    width: 200px;
    background-color: green;
}

#center {
    width: 100%;
    background-color: blue;
}

#right {
    width: 300px;
    background-color: red;
}

以下の図を実現する
ステップ2
次にleftブロック、rightブロック、centerブロックを水平に並べ、水平線を統一するため、フローティングさせます.cssスタイル#container .column { float: left; }を追加
centerブロックの幅が100%なので、すべての位置を占めています.leftブロックとrightブロックは下に移動するしかありませんが、footerが上に移動しているのが見えます.これはcontainerブロックの3つのサブ要素がフローティング(フローティングはドキュメントフローから離れます)しているためです.3つのサブ要素のheightが200 pxであっても、containerのheightが0でfooterが上に移動します.
ここでフローティングをクリアする方法は3つあります.
1、contanierの高さを設定する.
2、footerのスタイルにclear:bothを加えると、他の要素のフローティングがその影響を除去することができます.
3、擬似要素でフローティングをクリアする

#container:after {
    display: block;
    content: '';
    width: 100%;
    height:0;
    clear: both;
}

図のように実現する
ステップ3
containerのpadding-leftをleftブロックの幅に等しく設定し、padding-rightはrightブロックの幅にスタイルを追加します.

#container {
    padding-left: 200px;
    padding-right: 300px;
    box-sizing: border-box;
}

解析:箱モデルには2種類あり、w 3 c標準の箱モードとIE怪異箱があり、違いはpadding(内辺距離)とborder(枠)が箱のwidthとheightに計算されているかどうかである.ブラウザのデフォルトのボックスモデルはcontent-box、すなわちpaddingとborderはwidthには含まれません.私たちのcontainerのwidthは100%なので、content-boxであればcontainerが表現するwidthはブラウザ全体の幅より大きく、ブラウザの下にスクロールバーが見えるので、box-sizing: border-boxを設定してpaddingをwidthに計算します.
図のように実現する
ステップ4
leftブロックをcenterブロックの左側に移動するには、rightブロックをcenterブロックの右側に移動します.もともとcenterブロック、leftブロック、rightブロックは同じ水平線で並べられているはずです.containerの幅が足りないので、水平線に3つのブロックを収容してleftブロックとrightブロックを押し出します.
そこでleftブロックのスタイルmargin-left: -100%;を追加しました
ボックスのmarginの距離はボックスに対応する方向で計算され、負の値は逆方向に移動することを示します.例えばmarin-leftは箱の左側で、margin-rightは箱の右側で計算します
marginの値がパーセンテージで計算される場合、計算の基礎は前の親の幅であり、ここではcontainerのwidthであり、centerブロックのwidthがcontainerブロックと同じであるため、leftブロックとcenterブロックが重なる.またleftブロックはcenterブロックの上にあります(階層z-indexが設定されていない場合は、もちろんz-indexはpositionと組み合わせて使用され、階層の要素を統一し、重なると後ろの要素が前の要素を覆います)
このときleftブロックは、自身の幅の位置、すなわち200 pxをさらに左に移動する.

#left {
    position: relative;
    right: 200px;
}

解析:relativeオブジェクトは通常のドキュメントフローに従い、top、right、bottom、leftなどのプロパティに基づいて通常のドキュメントフローで位置をオフセットできます.rightの距離はleftブロックの左側の位置に基づいて計算されます.
次にrightブロックにスタイル#right { margin-right: -300px;}を付けるとrightブロックが左に300 px移動する(containerのpadding-right位置をちょうど覆う)ことを示す
cssコード全体は次のとおりです.

body {
    width: 100%;
    margin: 0;
}

#header,
#footer {
    width: 100%;
    background-color: #ccc;
}

#container {
    width: 100%;
    padding-left: 200px;
    padding-right: 300px;
    box-sizing: border-box;
    background-color: yellow;
}

#container:after {
    display: block;
    content: '';
    width: 100%;
    height:0;
    clear: both;
}

#container .column {
    height: 200px;
    float: left;
}

#left {
    width: 200px;
    background-color: green;
    margin-left: -100%;
    position: relative;
    right: 200px;
}

#center {
    width: 100%;
    background-color: blue;
}

#right {
    width: 300px;
    background-color: red;
    margin-right: -300px;
}

に注意
ブラウザの幅をある程度縮小すると、左欄と右欄の幅とmargin値、containerのpadding値が書かれているため、ブラウザの幅が収まらないとエラーが発生します.ブラウザの幅がどのように変化しても、私たちが示したページは完璧です(ハハは少し誇張されています)、もちろん、これは必ず最小幅の要求があります(pc端は具体的な需要を見て、モバイル端は一般的にiphone 5の幅320 pxによって)
ps:これは私がドキュメントを書くのですが、間違ったところがあれば、皆さんに指摘してください.ありがとうございます.
転載先:https://juejin.im/post/5cae077ef265da03ae74abfd