CSS基礎④

この10種類を覚えよう

ボックスモデルに関するセレクタ
ボックスモデルは（width,height, paddin,gborder,magrin, )で構成されています。

width（ボックスの横幅）

初期値はauto（自動計算してくれる）
数値は%使うことが多い
負の値は指定できない
HTMLのテキスト、画像（img）の適用される箇所

・デザインの都合が可能な限り「％」を使用しましょう。
・「max-width」「min-width」は便利

height（ボックスの縦幅）

初期値はauto（自動計算してくれる）
数値は%使うことが多い
負の値は指定できない
HTMLのテキスト、画像（img）の適用される箇所

・デザインの都合が可能な限り「初期値」にしましょう。
・「width」と違い、「％」は使い難い

padding（境界線内側の余白）

上下左右まとめての指定が可能（変化したのが見た目でわかる）
数値と%の指定が可能
負の値は指定できない
CSSでbackgroudが適用される箇所

・「box-sizing: border-box;」を使えばだいたい解決するかも
・数値を入れれば絶対に余白を持ちます。（逆に効かない場合は別の何かが間違っています。）
・背景「backgroud」に画像を持たせる時に有効・余白の取り方に悩んだらpaddingで指定すると良いかも？

margin(境界線外側の余白）

上下左右まとめての指定が可能（変化したのが見た目でわからない）
数値と%の指定が可能
負の値は指定できる
色、背景など色が適用できない

・ネガティブマージン、他のセレクタとの関係性が難しい
・マージンの相殺に気を付ける（ぶつけないようにする）

border（境界線の太さ、線の種類、色）

上下左右まとめての指定が可能（変化したのが見た目でわかる）
数値と%の指定が可能
負の値は指定できない

・初期値で「backgroud」を含む箇所だが、「box-sizing」で調整可能
(box-sizingは要素のwidthとheightに、paddingとborderのサイズを含めるかどうかを指定するCSSプロパティ)

contain-box：widthとheightにpaddingとborderのサイズを含めない
border-box：widthとheightにpaddingとborderのサイズを含める
box-sizingは全称セレクタに指定して、全要素に一括で指定するのが一般的

ボックスをレイアウトするセレクタ（float/clear/position/overflow/display）

float（横に並べる）

初期値はnone
floatプロパティは、指定された要素を左「left」または右「right」に寄せて配置
ただし、左か右にしか配置出来なくなり中央に揃わなくなるその他、特殊な仕様が多々ある

・使わない時は「none」にする。（これはよく使います。）
・コーディングで一番悩ましい存在、極力使わないというのがコツかも？！
・「float」したら「clear」を徹底する
・横並びになれば、横並びの合計値になるので、ボックスの数値をしっかり把握する
・「ネガティブマージン」と合わせたら更に強力！

clear（float回り込みを解除）