CSSの一般的なレイアウト
3584 ワード
cssボックス(標準or非標準)でよく使われるレイアウトを見渡すと、私は大きく2種類に分けられ、1つは中央、1つは等分です.中央には、水平方向の中央、垂直方向の中央、水平方向の垂直方向の中央が含まれます.等分には、等分ブロックレイアウト、等分高レイアウトも含まれます.
まず水平中心のレイアウトスキームを見てみましょう
1.margin+定幅
このような定幅中央によく見られるものは,あまり説明されていない.
**2. table + margin **
互換性:IE 8以上
3. inline-block + text-align
不定金の別の方法
互換性:IE 6とIE 7に対応可能
4. absolute + transform
定幅の別の方法であるが、
5. absolute + margin-left
定幅のもう一つの方法は,第4の方法に比べて彼の互換性がよい.
6. flex + justify-content
flexレイアウト、将来のレイアウトのトレンドは、現在互換性が悪いだけです(モバイル側が推奨しています)
1. table-cell + vertical-align
互換性がよい
2. absolute + transform
ドキュメントフローからの絶対的な位置決めは、後続の要素のレイアウトに影響を与えません.
互換性があまりよくない(by the way、ここで言う互換性があまりよくないのはIE 8と以下のバージョンを意味する)
3. flex + align-items
上の2と同じで、互換性がやや悪い
1. absolute + transform
言うまでもなく、互換性がやや悪い
2. inline-block + text-align + table-cell + vertical-align
互換性が良く、互換性の良いおすすめが必要です
3. flex + justify-content + align-items
言うまでもなく、互換性がやや悪い
水平方向中央
まず水平中心のレイアウトスキームを見てみましょう
1.margin+定幅
Demo
このような定幅中央によく見られるものは,あまり説明されていない.
**2. table + margin **
Demo
display: tableは表現的にblock元素に似ているが、幅は不定幅である.互換性:IE 8以上
3. inline-block + text-align
Demo
不定金の別の方法
互換性:IE 6とIE 7に対応可能
4. absolute + transform
Demo
定幅の別の方法であるが、
transformはcss 3のラベルに属する(互換性の考慮)5. absolute + margin-left
Demo
定幅のもう一つの方法は,第4の方法に比べて彼の互換性がよい.
6. flex + justify-content
Demo
flexレイアウト、将来のレイアウトのトレンドは、現在互換性が悪いだけです(モバイル側が推奨しています)
垂直方向中央揃え
1. table-cell + vertical-align
Demo
互換性がよい
2. absolute + transform
Demo
ドキュメントフローからの絶対的な位置決めは、後続の要素のレイアウトに影響を与えません.
互換性があまりよくない(by the way、ここで言う互換性があまりよくないのはIE 8と以下のバージョンを意味する)
3. flex + align-items
Demo
上の2と同じで、互換性がやや悪い
水平垂直方向中央
1. absolute + transform
Demo
言うまでもなく、互換性がやや悪い
2. inline-block + text-align + table-cell + vertical-align
Demo
互換性が良く、互換性の良いおすすめが必要です
3. flex + justify-content + align-items
Demo
言うまでもなく、互換性がやや悪い