[CSS]box-sizing

1. box-sizing이란?

box-sizing은 박스의 크기를 화면에 표시하는 방식을 변경하는 속성이다. 

먼약에 엘리먼트에 테두리가 있는 경우에는 테두리의 두께로 인해서 원하는 크기를 찾기가 어렵다. 

따라서 엘리먼트에 box-sizing을 지정하면 해당 엘리먼트의 padding과 border가 더는 너비를 늘리지 않게되서 크기를 예측하기가 더 쉬워진다.

2. box-sizing 속성

box-sizing: content-box;          기본값. padding, border, margin 값은 포함하지 않는다.

box-sizing: border-box;           padding, border 값만 포함하며, margin값은 포함하지 않는다.

box-sizing: padding-box;         padding값만 포함하고, border, margin값은 포함하지 않는다.

3. 브라우저 호환성

속성
box-sizing	8	chrome 10~ -webkit	Firefox 29~ -moz- ('padding-box'속성은 파폭에서만)	m: all Android: 2.1~ (-webkit prefix), 4.0

4. 결론

적용하려는 브라우저가 'box-sizing'을 완벽하게 지원할 때에만 적용하는게 좋을것 같다.