フロントエンドステップシリーズ(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レイアウトテクニック
があるかもしれません