共通のCSSレイアウト

、CSSの一般的なレイアウトは何？

（1）2つのレイアウト

（2）は、3つのレイアウト

（3）弾性レイアウト

（4）レイアウト杯

（5）飛行翼

第二に、特定の実装

（1）2つのレイアウト

https://www.cnblogs.com/qing-5/p/11442906.html

（2）は、3つのレイアウト

https://www.cnblogs.com/qing-5/p/11338819.html

聖杯の（3）レイアウト及び飛行翼

同じポイント：

　　固定幅の両側に三本のレイアウト、適応中間幅、。

　　b、ブラウザでレンダリングを示し、中央の列に優先権を与えるために
　　、C、任意の列の最大許容高さ;
　　; dは、一つだけ追加のDIVタグを必要とし
　　、Eを最も簡単なCSS、最小限のHACK文が必要です。
　　

違い：

問題に翼のレイアウトと杯ソリューションをフライング前半は同じです。

これは、中央の列のdivと並んで、それを聞かせて、負のマージンを持つすべての3つの列、2列の周りに浮いています。

それが解決する場合を除き、「真ん中の列のdivのコンテンツがブロックされていない、」考え方は同じ問題ではありません。

聖杯の（4）、レイアウト

<スタイル> 
        .container { 
            パディング：0 100pxに200pxの ; 
        } 
        .LEFT { 
            幅：200pxのを、
            背景：赤 ;
             / * キー：要素は、文書の流れ、それは常に行に移動し、比較的大きな負の値に沿って左に移動します* / 
            マージン左：-100％ ; 
            左：-200px ; 
        } 
        .RIGHT { 
            幅：100pxに、
            背景：青; 

            margin-left：-100px ; 
            右：-100px ; 
        } 
        .main { 
            背景：黄色。
            幅：100％ ; 
        } 
        .LEFT、.main、.RIGHT { 
            フロート：左 ; 
            分の高さ：200pxの。
            位置：相対 ; 
        } 

    </スタイル>

< DIV クラス= "コンテナ" > 
    < DIV クラス= "メイン" >主</ DIV > 
    < DIV クラス= "左" >左</ DIV > 
    < DIV クラス= "右" >権利</ DIV > 
</ DIV >

（5）、飛行翼

<スタイルタイプ= "テキスト/ CSS"> 
        .LEFT、.main、.RIGHT { 
            フロート：左 ; 
            分の高さ：130px ; 
            テキスト整列：センター ; 
        } 
        .LEFT { 
            マージン左：-100％ 。
            背景：緑 ; 
            幅：200pxの。
        } 
        .RIGHT { 
            マージン左：-300px。
            背景色：赤 ; 
            幅：300ピクセルによって ; 
        } 
        .main { 
            背景色：青 ; 
            幅：100％ ; 
        } 
        .content {
             / * キー：中間マージン通常表示に押さDIV * / 
            マージン：200pxのにより0 300ピクセル ; 
        } 
    < /スタイル>

< DIV クラス= "コンテナ" > 
    　   < DIV クラス= "メイン" > 
    　　 < DIV クラス= "コンテンツ" >主</ DIV > 
</ DIV > 
    　　< DIV クラス= "左" >左</ DIV > 
    　　< DIV クラス= "右" >右</ DIV > 
</ DIV >

（ 6）弾性装置（フレキシボックス）

　　CSS3を開発するためのより効率的な方法を提供すること、すなわち、レイアウトのボックスモデル（柔軟ボックス）ストレッチ--Flexboxレイアウト、新しいレイアウトパターンを紹介し、物流コンテナプロジェクトのレイアウトを調整し、その大きさは不明であっても、またはダイナミック、ここでのFlexと呼ばれます。
　　フレキシボックスのレイアウトは一般的に、より複雑なページのデザインに使用される、あなたは簡単に要素の浮動レイアウト実装定義位置への依存を軽減しながら、ときに、ブラウザウィンドウのサイズと相対的な位置と同じ大きさの画面の要素を維持するために変更を実装し、要素をリセットすることができますサイズ。

参考リンク：https://www.jianshu.com/p/81ef7e7094e8

おすすめ