widthとheightの指定方法

①px
ピクセルで指定。他の要素の影響を受けない。

②％
画面幅や親要素などに対して相対的に指定。widthで使う。

③auto
pxや％で指定しない場合の値は、「auto（自動）。初期値は「auto」。widthの場合、親の要素と同じ横幅になります。親要素がないと、widthは画面の横幅いっぱいに広がります。
heightの場合、子要素と同じ高さになります。子要素がないと、heightは０になります。

ボックスモデル

①border
プロパティは、太さ（）枠線の種類（）、色（）を指定できる。
例）border: 5px solid yellow;

border（枠線）には、solidのほかに、double（二重線）、dashed（破線）、dotted（点線）などがある。

borderを一部に設定する場合は、border-widthを使用。
top（上）right（右）bottom（下）left（左）に置き換える。
例）border-bottom-width: 5px;

②marginとpadding
marginはborder外側に余白を作りたい時。
paddingはborder内側に余白を作りたい時。

marginやpaddingには、borderと同じように「上方向のみ」「下方向のみ」のように、一方向のみに適用できるプロパティがある。

Flexbox

要素の縦並び・横並びなど順序指定や上下左右の入れ替えを容易に行えるレイアウトモード。
Flexboxは基本的に操作したい要素の親要素にCSSを指定。

display: flex; /* Flexboxの利用 */
justify-content: center;/* 子要素の横並び・中央寄せ */

marginプロパティの値に0 autoを指定すると指定した要素自身を中央揃えにすることができる。

margin: 0 auto; /* 中央寄せ（左右に余白がないとできない） */

大きなdivをmargin: 0 auto;で中央寄せにしておいて、その子要素を横並び中央寄せにする方法。

main {
  width: 960px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

displayプロパティ

①ブロックレベル要素
Webブラウザ上では前後に改行が入り、縦に積み上がって表示。

②インライン要素
テキストと同じレベルで扱われ、前後に改行は入らない。

※ ブロックレベル要素・インライン要素を使うときの注意点
ブロックレベル要素内には、ブロックレベル要素やインライン要素を配置できる
インライン要素内には、インライン要素しか配置できない（ブロックレベル要素は配置できない）

③インラインブロック要素
並び方はインライン要素と同様に横に並び、中身はブロックレベル要素と同様に幅（width）や高さ（height）、余白（paddingやmargin）の指定ができる。

左右の中央揃え
ブロックレベル要素で中央揃えにするには、Flexboxで指定します（上下余白を0px、左右余白を自動的に等間隔）。インライン要素で中央揃えするには、text-align: center; を指定。
１. テキストの中央揃え
中央揃えにしたいテキストの親要素にあたるブロック要素に、text-align: center;を設定。

２. 画像の中央揃え
画像のimgタグはインライン要素なので、テキストと同じ扱いになります。親要素に、text-align: center; を設定。

３. ブロックレベル要素の中央揃え
中央揃えにしたい要素の親要素に、Flexboxの設定。

上下の中央揃え
上下の中央揃えは、line-heightで数値を指定。「行の高さ」＝「親要素の高さ」にして中央揃え。
中央揃えしたいテキストに line-height: ◯◯px; のように行の高さを指定。ここで指定した値と、親要素である「上下中央に配置したいボックスの高さ」を同じ値にする。