박스
위 랍스터 그림 콘텐트의 크기는 300*200인 반면 지금 읽고 있는 엘리먼트의 크기는 콘텐트 폭 300,패딩 20,보더 10을 더한 330입니다.
하지만,box-sizing의 border-box 속성값을 사용하면 콘텐트,패딩,보더 포함하여 그림과 같이 너비가 300이 됩니다.
300px그림 두개를 붙여봅시다. 그림의 너비가 300이고 보더가 1px이므로 그림이 한 블럭안에 나타나지 않습니다.하지만,box-sizing의 border-box 사용하고 너비를 50%로 설정하면 복잡한 계산없이 표현됩니다.