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

CSS

CSS/レイアウト

Top / CSS / レイアウト

https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout

通常フロー

• https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Normal_Flow

ボックスモデル

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

ブロックレベル要素

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

インライン要素

• widthとheightが無視される
• margin,padding,borderは適用される

margin

• 標準または代替のボックスモデルを使用しているかどうかにかかわらず、表示ボックスのサイズが計算された後、マージンは常に追加されます。

結合

• マージンが接する 2 つの要素がある場合、それらのマージンは結合して 1 つのマージンになります。これは、個々の最大マージンのサイズです。

右側固定

ネガティブマージン (外側にはみ出る)

• main
  • float:left
  • margin-right?:300px
• side
  • float:right
  • width:300px
• https://www.nxworld.net/tips/css-variable-width-and-fixed-width-layout.html

calc

float

Flexbox

CSS/display