box-sizing 사이즈 계산법

box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성입니다.

- 기본값 : content-box

- 상속 : No

- 애니메이션 : No

- 버전 : CSS Level 3

속성으로는 box-sizing: content-box l border-box l initial l inherit 이 있습니다.

1. content-box

box모델의 기본값으로 width, height 값 + padding, border 값을 추가로 더해야 진짜 width, height 값이 된다.

컨텐츠 역역을 기준으로 크기를 정합니다.

 

2. border-box

width, height 값 안에 padding, border 값도 포함되어있다. 테두리를 기준으로 크기를 정합니다.

 

3. initial

기본값으로 설정합니다.

 

4. inherit

부모 요소의 속성값을 상속받습니다.