cssラーニング-レイアウト

720 ワード

cssレイアウト技術の根本は3つの基本概念である:位置決め、フローティング、外距離操作.
ページの中央揃え
width:920px
margin:0 auto;

body{
    text-align:center // ie          ,      。
}

2つの列と3つの列のフローティングベースのレイアウトを作成
主にfloatを用いて実現される.
ただしdisplay:inlineを追加するieにおける二重外辺距浮動によるbugを予防することが望ましい.
正しい
.content{
    overflow:hidden;
}

固定幅、フロー、フレックスレイアウトを作成します.
フローレイアウトの場合:寸法はピクセルではなくパーセントで設定されます.これにより、フローレイアウトをブラウザウィンドウに対して伸縮することができる.
しかし、小さくなると画素を追加するかmin-widthを追加することができる.問題を防止しますね.
フレックスレイアウトの場合:ブラウザの幅ではなく番号に対して要素の幅を設定します.幅をem単位で設定し、文字数が増加するとレイアウト全体が拡大することを保証します.
高さが等しい列を作成するには
css 3の場合
column-count
column-witdh
column-gap
column-rule
cssフレームワークとcssシステム