フロントエンドステップシリーズ(2):cssの一般的なレイアウトソリューション


水平方向中央のレイアウト


margin+定幅

Demo
  • は先端が見たことがあるに違いないが、この定幅の水平が中央に位置し、不定幅
  • を以下のように実現することもできる.

    table+margin

    Demo
  • display:tableは表現的にblock要素に似ているが、幅はコンテンツ幅である.
  • 親要素スタイル(IE 8およびそれ以上のバージョンをサポート)互換IE 8を設定する必要はありません.バージョン

    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があり、 は.leftmargin-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レイアウトテクニック








    • アルファベットで :
      A B C D E F G H I J K L M N O P Q R S T U V W X Y Z その