フロントエンドステップシリーズ(2):cssの一般的なレイアウトソリューション
12539 ワード
水平方向中央のレイアウト
margin+定幅
Demo
table+margin
Demo
display:tableは表現的にblock要素に似ているが、幅はコンテンツ幅である.inline-block+text-align
Demo
（ IE6 IE7）
absolute+margin-left
Demo
-
-
transformの がより い に する があります.
absolute+transform
Demo
ドキュメントフローからの な けは、 の のレイアウトに を えることはありません. transformはCSS 3 であり、 の がある .
flex+justify-content
Demo
ノードのプロパティを するだけで、 を する はありません. flex に がある え
table-cell+vertical-align
Demo
が い(IE 8 のバージョンではtableにページ を する がある) absolute+transform
の なabsoluteはこのような さな に してもちろん です
Demo
はドキュメントフローから れており、 の のレイアウトには しませんが、 が の である 、 も さを います. transformはCSS 3 であり、 の がある .
、これもmargin-topを して することができ、 flex+align-items
absoluteが いと えば、flexは っているだけで、 こそ だが、 の がある
Demo
absolute+transform
Demo
ドキュメントフローからの な けは、 の のレイアウトに を えることはありません. transformはCSS 3 であり、 の がある .
inline-block+text-align+table-cell+vertical-align
Demo
が い flex+justify-content+align-items
Demo
ノードのプロパティを するだけで、 を する はありません. の 1 の 、1 の
このようなレイアウトで も なのは、float+margin
left
right
right
IE 6に3 pxのBUGがあり、 は.leftにmargin-left:-3pxを えることができる.もちろん、 の もこのバグを することができる.
left
right
right
float+overflow
left
right
right
overlow:hiddenがBFCモード(block formatting context)ブロックレベルのフォーマットコンテキストを する.BFCって ですか? な を うのは、BFCの で をしても、 では がありませんよ.この のスタイルは だが、IE 6 table
left
right
right
tableの は、 のセル と の と である.table-layout: fixedはレンダリングを し、レイアウトを します.table-cellでは margin は できませんが、paddingでピッチflex
left
right
right
を できます. バージョンブラウザ の パフォーマンスの は、 なレイアウト に しているだけです.
が なレイアウトです. : CSSレイアウト:40チュートリアル、テクニック、 、ベストプラクティス CSS レイアウトおよびソリューション CSSディスプレイ も なHtmlとCSSレイアウトテクニック
があるかもしれません