box_sizing

box sizing은 요소의 width 와 height 를 계산하는데 사용되는 기본적인 CSS box model을 대체하기 위해 사용된다.

characteristic	value
초기값	content-box
상속	no

syntax

content-box

• CSS 표준에 의해 정의된 기본 스타일

• width와 height 속성은 오로지 콘텐츠만을 포함하며 측정되며, padding, border, margin 미포함

• 참고 : padding, border, margin은 박스 외부에 존재. 예를 들어

    .box
    {
      width : 350px;
      border : 10px solid black;
    }

• 결과적으로 브라우저에서 렌더링 되는 것은 .box {width : 370px}

padding-box

• width와 height 속성은 padding 크기를 포함한다.

• 하지만 border 및 margin 미포함

border-box

• width와 height 속성이 padding border를 포함. margin 미포함

• 이 box model은 IE 에서 문서가 쿽스 모드일 때 사용

• 참고: padding 과 border는 박스 안에 존재한다. 이를테면 .box {width: 350px}; 인 요소에 {border: 10px solid black;} 를 적용하면 결과적으로 {브라우저에서 렌더링되는 것은} .box {width: 350px;}이다.