ウェブカツ！！の HTML・CSS部 初級 を勉強した

ウェブカツ！！の HTML・CSS部 初級を全て学習したので学んだ内容をメモ。

ウェブカツ!! - 初心者向けオンラインプログラミング学習サイト -

要素の「ボックス」について

HTML要素は「ボックス」と呼ばれる領域を生成する。
ボックスは content, padding, border, margin から構成される。

content: 要素の本体
padding: ボックスの内側
margin: ボックスの外側
border: margin と padding の境界

ボックスはブロックレベル要素とインライン要素に大別できる。
それぞれの要素は以下の違いを持つ。

• ブロックレベル要素
  　横幅一杯のボックスを生成する。

• インライン要素
  　内部にブロックレベル要素は入れられない。
  また、上下の margin を設定できない。

position

css の position プロパティは 4種類存在する。

1. static
   　デフォルトの設定値
2. absolute
   　top, right, left, bottom で絶対的な位置を指定
3. relative
   　top, right, left, bottom でボックス位置から相対的な場所に配置
4. fixed
   　absolute と一緒だが、スクロールしても画面から消えない

overflow:hidden による float 解除方法

親要素に overflow:hidden を付けると、子要素の float が解除される。