Box model

Visual formatting model

브라우저는 CSS visual formatting model에 따라 컴퓨터 스크린(continuous media) 또는 프린트 양식(paged media)에 document tree를 어떻게 display할 지 결정한다.

visual formating model은 box model에 따라 element를 box 형태로 생성하며 box의 레이아웃은 아래 요소에 따라 결정된다.

• box dimension type
• positioning scheme
  • normal flow
  • float
  • absolute positioning
• document tree에서 요소 간의 관계
• external information
  • viewport size
  • intrinsic dimensions of images
  • ETC

Box model

1. content edge

• text/image/video player와 같은 'real' content를 포함한다.

2. padding edge

3. border edge

• border는 left / right / top / bottom으로 구분된다.

• background의 default는 border-box까지 채우며 : box-sizing과는 무관

  https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
  

• 이는 background-clip을 통해 수정할 수 있다.

    background-clip:padding-box;
    background-clip:content-box;
    background-clip:text;

    background: linear-gradient(90deg, blue, red, yellow, green);
    color:rgba(256,256,256,0.1);

4. margin edge

• margin collapsing이 발생할 떄 box끼리 margin을 공유해 margin이 CSS 선언대로 정의되지 않는다.

Inline boxes?

inline box는

• box model에 따라 height, width를 갖지만
• vertical padding/margin/border가 다른 박스를 밀어내지 않으며

<div>
      <span>hello</span>
      <span>hello</span>
      <span>hello</span>
</div>

span {
  border: solid 1em;
  padding: 1em;
  margin: 1em;
}
span:nth-child(2) {
  border: solid 2em;
  padding: 2em;
  margin: 2em;
}
span:last-child {
  border: solid 3em;
  padding: 3em;
  margin: 3em;
}

• line-height에 의해 상하 element를 밀어낸다.

    <div>
    	<span>inline</span>
    </div>
    <div>
    	<span>inline</span>
    </div>

    span{
      border: solid 1em; // border에 의한 height가 발생하지 않는다.
      padding: 1em; // 적용x
      margin:0;
    }

    div:last-of-type span{
      line-height:4;
    }

Inner and Outer display types

CSS boxes의 display type은

• inner display type
• outer display type로 분류된다.

위에서 설명한 block/inline box는 outer display types에 해당되어 element의 layout flow에 영향을 미치고

inner display types는 children elements의 flow를 결정한다.

inner display

• default : normal flow
• table
• flex
• grid

더 자세한 분류

Containing block

element의 size와 position은 property의 value에 따라 containing block에 의해 결정되기도 한다.

• width/height/padding/margin value가 %일 때
• position이 absolute/fixed일 때

containing block?

element의 containing block은, element의 position 속성값에 의해 결정된다.

일반적으로 containing block은 block-level의 ancestor element의 content-box이지만, 이는 상황에 따라 달라질 수 있다.

특수한 상황에서의 element의 containing block은 element의 position value에 의해 결정되며 이를 구분하면 다음과 같다.

1. static, relative, sticky인 경우

   • block container이거나 formatting context를 형성하는 가장 가까운 ancestor element의 content box edge
     • block container : inline-block, block, list-item
     • formatting context : table container, flex container , block container itself

2. absolute

• static이 아닌 position을 갖는 가장 가까운 ancestor의 padding box

3. fixed

• viewport (media가 continous일 때)
• page area

4. absolute / fixed일 경우 가장 가까운 ancesor가 아래의 조건을 만족할 때, ancestor의 padding box가 containing block이 된다.

• transform / perspective value가 none이 아닐 때
• will-change 속성이 transform/perspective일 때
• filter 속성이 none이 아닐 때
• contain 속성이 paint일 때

5. root element ()의 containing block은 initial containing block이라 하며 viewport 또는 page area의 넓이를 갖는다.

containing block에 따라 계산되는 percentage value

• height / top / bottom 속성 값이 %일 경우
  • contining block의 height 에 따라 계산
• width / left / right / padding / margin
  • width

magin collapsing

bottom margin과 top margin이 single margin으로 collapse되는 현상으로

• floating / absolutely positioned element는 margin collapsing이 발생하지 않으며

• 다음과 같이 elements에서 margin이 겹칠 때 발생한다.

  • adjacent siblings

    <div>bottom margin</div>
    <div>top margin</div>
    
    div:first-child{
    margin-top:1em;
    };
    div:last-child{
    margin-bottom:1em;
    };

- parent와 decendants 사이에 box 정보가 없을 때

    ```css
    <div id="parent">
      <div id="child">parent no content/padding/border</div>
    </div>

    1. 
    #parent{
      margin-top:10em;
      border: 1px;
    }
    #child{
      margin-top:10em;
    }

    2. 
    #parent{
      margin-top:10em;
    }
    #child{
      margin-top:10em;
    }
    ```

    1. parent가 border를 가질 떄 : margin collapsing이 발생하지 않는다.

        2. parent의 margin을 제외한 box model 정보가 없을 떄 

- empty blocks

To do

• visual formatting model
• block formatting context
• z-index
  • stacking context