• 本文
• リロード
• 差分
• バックアップ
• 名前変更
• リファラ
• 新規ページ
• 編集

CSS

ボックスモデル

Top / ボックスモデル

https://developer.mozilla.org/ja/docs/Learn/CSS/Building_blocks/The_box_model

CSS/ボックス?

• ブロックボックス	display:block	ブロックレベル要素
  インラインボックス	display:inline	インライン要素

ブロック要素

• デフォルトでは、その親要素の幅の100%で、そのコンテンツと同じ高さ

• 改行される
• width と height のプロパティが尊重されます。
• padding、margin および border により、他の要素がボックスから押し出されます。

インライン要素

構成要素

• プロパティ		場所
  width,height	コンテンツボックス	中身	ボックスの周りの見えないスペース。マイナスを指定するとはみ出る
  padding	パディングボックス	枠の内側	0以上
  border	ボーダーボックス	枠
  margin	マージンボックス	枠の外側

計算方法

標準ボックスモデル?

• 標準のボックスモデルでは、ボックスにwidthとheightを指定すると、コンテンツボックスの幅と高さが定義されます。
• 次に、すべてのpaddingとborderがその幅と高さに追加され、ボックスが占める合計サイズが取得されます

• marginはボックスの実際のサイズにはカウントされません

代替ボックスモデル

• box-sizing:border-box?

内側と外側

概要

• 要素に適用されるボックスのタイプは、display:block や display:inline などの display プロパティ値によって定義され、displayの外側の値に関連します。

外部 (display-outside)

• display:block
• display:inline
• display:run-in?

内部 (display-inside)

• display:flow?
• display:flow-root?
• display:table
• display:flex
• display:grid
• display:ruby?