Box Model

HTMLのすべての要素は、実際にはボックスに含まれ、ボックスモデルに従います.
ケースモデルを構成する要素は4種類ある.

コンテンツ

border

ボーダー

枠内

エッジ外接

Block & inline box

블록 박스の機能
1箱

が1行を占めています.

各箱はコンテナの占有可能な空間を占有している.

width、heightを設定できます.

padding、margin、borderによると、他の箱は遠くなります.

인라인 박스の機能

Inline Boxを作ったからといって、新しい行列に入ることはありません.

width、設定heightも適用されません.

padding、margin、borderの垂直要素(top、bottom)設定を適用しても、他の行の内枠は遠くなりません.

padding、margin、borderの水平要素(右、左)の設定を適用すると、他の行の内側ボックスは遠くなります.

属性の表示

ボックスタイプは、displayプロパティで変更できます.

/* 예시 */
.box { display: inline-block; }

(inline-block:inline boxのようにboxの間に並べて置くことができるが、block boxのようにmarging-top、margin-blottomなどを設定することができる.)

display:noneとvisibility:hiddenの違い

電子:関連要素が見えません.そして他の要因でその位置を埋めます.
後者:関連要因が見えない.しかし、空席は依然として存在する.

box-sizing

箱の高さ、幅を測る方法は大きく2つあります.content boxかborder boxかだけを測定します.デフォルトはcontent-boxです.

/* content-box*/
.box {
  width: 350px;
  height: 150px;
  margin: 10px;
  padding: 25px;
  border: 5px solid black;
}

/* content-box */
.box {
  box-sizing: border-box;
}

box-sizeをcontent-boxとする場合は、width、heightを設定するたびにpadding、border値を考慮します.これは煩わしい仕事だ.このため、次のように設定します.

* {
    box-sizing: border-box;
}

width & height

%はコンテナ基準の単位です.

div { height: 100% }

これによりdiv容器のheight以上が大きくならない.この問題を解決するには、divのすべての親コンテナをheight 100%に設定する必要があります.

body, 
html {
	height: 100%
}

pseudo-class & pseudo-element

pseudo-class:スタイルとして要素の特殊なstateを指定します.
pseudo-element:スタイルとして要素の特殊な부분を指定します.
はい.

/* 버튼 위에 마우스 커서를 올려놓는 경우 */
button:hover { color: white }

/* p의 첫 글자만 */
p::first-letter { font-size: xx-large }