ボックスモデル

ブロックレベルとインライン

ブロックレベル

・幅のサイズに関係なく上から連なっていく
・widthやheightを指定できる
・幅を指定しない場合、親要素(要素自身を囲う一段上の要素)のcontentと同じ幅になる
・上下のmargin、paddingを指定できる
・前後に改行が入る

主なブロックレベル

<p>要素：段落
<h1-6>要素：見出し
<div>要素：要素の囲い
<ul><ol>要素：リスト
<li>要素：リストの項目

インライン

・左から右へ横に並ぶ
・widthやheightを指定できない(文字数やコンテンツの大きさで決まる)
・上下のmargin、paddingを指定できない
・左右のmargin、paddingは指定できる

主なインライン

<a>要素：リンク
<img>要素：画像
<span>要素：範囲の定義
<strong>要素：重要性を表す

HTML要素の幅を指定するプロパティ

width:要素の幅を指定
max-wodth：要素の幅の最大値を指定
min-width：要素の幅の最小値を指定

HTML要素の高さを指定するプロパティ

height：要素の高さを指定
max-height：要素の高さの最大値を指定
min-height：要素の高さの最小値を指定

内側の余白サイズを指定

セレクタ{padding:20px 10px;}
セレクタ{padding:20px(上) 10px(左右) 20px(下)}
セレクタ{padding:10px 20px 30px 40px;}

外側の余白サイズ指定

セレクタ{margin-top/right/bottom/left:数値と単位;}
セレクタ{}margin-right/left:auto;}

box-sizing初期値での表示(content-box)

box幅＝width＋左padding＋右padding＋左border＋右border＋左margin＋右margin

box-sizingの値を変更した場合の表示(border-box)

box幅＝width(左padding＋右padding＋左border＋右borderが内包)＋左margin＋右margin
border-boxのほうがレイアウトが崩れにくくレイアウトしやすい

プロパティの値を計算式で指定

/*ナビゲーションのli要素横サイズを幅いっぱいから7等分にしたい場合*/
/*calc()で加算,減算,積算,除算ができる*/

例　ul li{width:calc(100%/7);}