아빠개발자의 노트

개요

​

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

기본값 : content-box

상속 : No

애니메이션 : No

버전 : CSS Level 3

문법

content-box : 콘텐트 영역을 기준으로 크기를 정합니다. // 기본값 박스 width , height 크기가 컨텐츠 기준

border-box : 테두리를 기준으로 크기를 정합니다. // 박스 width , height 크기가 border 까지 포함

initial : 기본값으로 설정합니다.

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

​

//content-box 는 기본값이라 안써도되지만 content-box 일경우 width의 크기와height 크기가 content

//border-box 는 border,padding,content의 크기까지 포함하여서 width 와 height 크기가 지정된다

예제

둘 다 width 값을 500px로 정하였으나, box-sizing 속성값에 따라 크기기 달라집니다. 첫번째 박스는 콘텐트 영역이 500px이고 테두리를 포함한 크기는 580px입니다.

두번째 박스는 테두리를 포함한 크기가 500px이고, 콘텐트 영역의 크기는 420px입니다.

브라우저 지원

Chrome : 10.0+ (4.0 -webkit-)

Firefox : 29.0+ (2.0 -moz-)

Internet Explorer : 8.0+

Opera : 9.5+

Safari : 5.1+ (3.2 -webkit-)