CSS3Boxレイアウトのまとめ

BOX指定なし

• 子要素がはみ出しているのはMargin、Padding、Borderのぶん？

box-sizing

content-box

• 「内容」の大きさでレイアウトされていないように見える？
• GoogleChrome・IE10で子要素がはみ出しているのはMargin、Padding、Borderのぶん？（Firefoxでははみ出さない）
• 暗黙の「box-orient: inline-axis/block-axis;」で横並びになっている？
• Firefoxの場合、暗黙の「box-align: stretch;」で子要素の高さが揃っているが、GoogleChromeでは本来の高さで表示されている
• 暗黙の「box-pack: start;」で左上によっている

border-box

• 「外枠」の大きさでレイアウトされてる
• GoogleChrome・IE10で子要素がはみ出しているのはMargin、Padding、Borderのぶん？（Firefoxでははみ出さない）
• 暗黙の「box-orient: inline-axis/block-axis;」で横並びになっている？
• Firefoxの場合、暗黙の「box-align: stretch;」で子要素の高さが揃っているが、GoogleChromeでは本来の高さで表示されている
• 暗黙の「box-pack: start;」で左上によっている

box-orient

olient-horizontal

• 横並びにレイアウトされている
  初期値「box-orient: inline-axis/block-axis;」との違いが分からない？
• GoogleChrome・IE10で子要素がはみ出しているのはMargin、Padding、Borderのぶん？（Firefoxでははみ出さない）
• Firefoxの場合、暗黙の「box-align: stretch;」で子要素の高さが揃っているが、GoogleChromeでは本来の高さで表示されている
• 暗黙の「box-pack: start;」で左上によっている

olient-vertical

• 縦並びにレイアウトされている
• GoogleChrome・IE10で子要素がはみ出しているのはMargin、Padding、Borderのぶん？（Firefoxでははみ出さない）
• Firefoxの場合、暗黙の「box-align: stretch;」で子要素の幅が揃っているが、GoogleChromeでは本来の幅で表示されている
• 暗黙の「box-pack: start;」で左上によっている

box-align

align-start

• 親要素と子要素が上端で揃っている
• GoogleChrome・IE10で子要素がはみ出しているのはMargin、Padding、Borderのぶん？（Firefoxでははみ出さない）
• Firefoxの場合、暗黙の「box-align: stretch;」が解除されて本来の高さで表示されている
• 暗黙の「box-orient: inline-axis/block-axis;」で横並びになっている？
• 暗黙の「box-pack: start;」で左によっている

align-center

• 親要素と子要素が中央で揃っている
• GoogleChrome・IE10で子要素がはみ出しているのはMargin、Padding、Borderのぶん？（Firefoxでははみ出さない）
• Firefoxの場合、暗黙の「box-align: stretch;」が解除されて本来の高さで表示されている
• 暗黙の「box-orient: inline-axis/block-axis;」で横並びになっている？
• 暗黙の「box-pack: start;」で左によっている

align-end

• 親要素と子要素が下端で揃っている
• GoogleChrome・IE10で子要素がはみ出しているのはMargin、Padding、Borderのぶん？（Firefoxでははみ出さない）
• Firefoxの場合、暗黙の「box-align: stretch;」が解除されて本来の高さで表示されている
• 暗黙の「box-orient: inline-axis/block-axis;」で横並びになっている？
• 暗黙の「box-pack: start;」で左によっている

box-pack

pack-start

初期値なので省略

pack-center

• Firefoxの場合、親要素内で中央揃えにレイアウトされてるが、GoogleChrome・IE10の場合、はみ出していると左揃えのまま
• GoogleChrome・IE10で子要素がはみ出しているのはMargin、Padding、Borderのぶん？（Firefoxでははみ出さない）
• 暗黙の「box-orient: inline-axis/block-axis;」で横並びになっている？
• Firefoxの場合、暗黙の「box-align: stretch;」で子要素の高さが揃っているが、GoogleChrome・IE10の場合本来の高さで表示されている

pack-end

• Firefoxの場合、親要素内で右揃えにレイアウトされてるが、GoogleChrome・IE10の場合、はみ出していると左揃えのまま
• GoogleChrome・IE10で子要素がはみ出しているのはMargin、Padding、Borderのぶん？（Firefoxでははみ出さない）
• 暗黙の「box-orient: inline-axis/block-axis;」で横並びになっている？
• Firefoxの場合、暗黙の「box-align: stretch;」で子要素の高さが揃っているが、GoogleChrome・IE10の場合本来の高さで表示されている