[CSS] Box Model

📦Box Model

<サイズ>

🗳️ width

🗳️ height

🗳️ min/max-height/width

   .blcok {
      width: 100px
      height :200px
   }
   
   #parent {
      width: 100px
      height :200px
   }
   
   #child {
      width: 50%px
      min-wid: 100px -> 50%한 값이 100px이하로 줄어들게 되면 더이상 줄어들지 않는다.
      height :200px
   }

<余白>

🗳️ margin

   /* Apply to all four sides */
  margin: 1em;
  margin: -3px;

  /* vertical | horizontal */
  margin: 5% auto;

  /* top | horizontal | bottom */
  margin: 1em auto 2em;

  /* top | right | bottom | left */
  margin: 2px 1em 0 auto;

  /* Global values */
  margin: inherit;
  margin: initial;
  margin: revert;
  margin: unset;

<Value>

  #parent {
  	width: 200px
    	height: 200px
  }
  #child {
  	margin: 30% -> 부모의 width인 200px의 30%의 값을 가지게 된다.
  }

🗳️ 境界崩壊(境界相殺)

1.近所の兄弟

兄弟の要素の上下の空白は出会って相殺します.
ex)boxの上端が10 px、下端が20 pxの場合、2つのboxが重なると、20 pxでマージンが得られる.

2.親子の間

の下の画像では、border、padding、およびコンテンツ値がなければ、子供のピッチおよび特許のピッチしか遭遇しない.

3.ブランクブロック

border、padding、inlineの内容がなく、height値が指定されていない場合、ブロックのmarging-topおよびmargine-bottomは相殺されます.

🗳️ padding

<ボーダー>

    /* 네 면 모두 적용 */
    padding: 1em;

    /* 세로방향 | 가로방향 */
    padding: 5% 10%;

    /* 위 | 가로방향 | 아래 */
    padding: 1em 2em 2em;

    /* 위 | 오른쪽 | 아래 | 왼쪽 */
    padding: 5px 1em 0 2em;

    /* 전역 값 */
    padding: inherit;
    padding: initial;
    padding: unset;

🗳️ border

borderスタイルにはいろいろあります.

  /* 스타일 */
  border: solid;

  /* 너비 | 스타일 */
  border: 2px dotted;

  /* 스타일 | 색 */
  border: outset #f33;

  /* 너비 | 스타일 | 색 */
  border: medium dashed green;

  /* 전역 값 */
  border: inherit;
  border: initial;
  border: unset;

✅ border vs outline

🗳️ border-radius

radiusにはいろいろな種類があります.

🗳️ box-sizing

box-sizing: content-box;
width: 100%;
border: solid #5B6DCD 10px;
padding: 5px;

🗳️ border-box

bord−boxはborderおよびpaddingのサイズも要素のサイズとして考慮する.

✅ border vs outline

  * {
    box-sizing: content-box;
  }