CSSレイアウト--聖杯レイアウトとダブルフライ翼レイアウト、Flexを使用して聖杯レイアウトを実現

前言

私はかつてcssのフロントエンドを書くのがとてもlowだと感じて、このような思想があった後に私はホームページのレイアウトから離れて、H 5の仕事は更につなぎたくなくて、ページの論理とパッケージのコンポーネントに夢中になります.最近まで私は面接して、面接官は私のcss 3の理解の熟していないことを言って、私は最初はとても屑ではありませんが、それから静かに反省して私が熟していないのではありませんて、ただ私はホームページの制作のこのような仕事を見ることができなくて、私にcssの問題を聞く時、私はもう一人の古いブラシ職人にこの壁をどこからブラシして、どこからブラシしてはいけませんか?これは何か決定的な問題がありますか.言うのは少し多くて、実はこちらの文章を书く主な目的はやはり自分に教えて、ある技术を见ることができなくて、技术は高低があって、しかしcssを学ぶ人の技术を代表しないでjsを学ぶ知能指数より低くて、术业は専攻があって、心理状态は自分で掌握して、外部の影响を受けないでください.

聖杯レイアウト&翼レイアウト

聖杯レイアウトと双飛翼レイアウトとは、実は解決した問題は同じで、左右の2つの欄の固定幅、中間部分の適応を解決し、その中のある部分の内容が他の内容より高い場合、3つの要素などが高いことを保証します.彼ら二人の違いは聖杯用paddingだ.ダブルフライ翼はmain外層にdivを追加してmarginに変更した.

聖杯レイアウト

次のhtmlを例に挙げます.

    

        
main
        
left
        
right
    

1.main、left、rightはすべて左に浮動し、position：relativeを設定すると後で使用されます.2.mainの幅を100%に設定します.leftとrightは幅を固定します(100 pxを仮定します).3.このときmain自身が1行にまみれているので、leftを引っ張ってmarginleft：100%を設定します.このときleftは上がったがmainの上に覆われています.4.contentにpadding-leftを設定するとleftの幅に等しくなり、このとき左側に100 pxの空白があり、mainもleftも押し込まれてきたので、復元するにはleftを左に100 px移動すればよい.5.この時点でrightは下に残り、同理margin-right：-100%は上に上がった.
cssコード:

ダブルフラップレイアウト

ダブルフラップレイアウトhtml:

    

        

            
main
        
        
left
        
right
    

cssの違いを比較してみましょう:一つ増えました.main-inner、相対的な位置決めが少なくなりました.

Flexレイアウト

両者を比較すると、Flexレイアウトはhtmlと聖杯レイアウトのようにcssをよく理解します.

未完待続...