CSS 3 튜토리얼: 상자 크기 조정 속성 이해
저자：Eve Cole
업데이트 시간：2009-06-12 17:54:27
IE 버그에 대해 말하자면, 악명 높은 예는 "박스 모델"에 대한 잘못된 해석입니다. IE5.x 및 IE6/7의 Quirks 모드에서는 테두리와 패딩이 모두 너비에 포함됩니다. 이는 프런트 엔드 엔지니어의 작업에 많은 문제를 추가합니다. 크기를 정의해야 하는 모든 상자는 "상자 모델 버그"를 유발합니까?
동시에 다른 브라우저 그룹의 표준 준수로 인해 제한된 공간에 표시되는 상자를 정확하게 정의할 때 남은 공간도 테두리와 패딩을 제외하면 너무 크다는 것을 계산해야 합니다. , 너비는 무엇입니까?
이러한 상황은 CSS3 시대에 "content-box"와 "border-box"라는 두 가지 값을 갖는 box-sizing이라는 속성 덕분에 개선되었습니다.
box-sizing: content-box;를 정의할 때 상자 모델에 대한 브라우저의 해석은 이전에 인식한 W3C 표준을 따릅니다.
box-sizing: border-box;가 정의되면 브라우저의 상자 모델 해석은 IE6과 동일합니다.
이 속성이 "늦음"이라고 말하는 이유는 무엇입니까? IE의 박스 모델 해석은 W3C 사양을 따르지 않지만 장점도 있습니다. 테두리 및 패딩 값을 어떻게 변경하더라도 상자의 전체 크기는 변경되지 않으며, 페이지의 전체 레이아웃을 방해하지 않습니다. Firefox와 같은 최신 브라우저에서는 패딩 값을 변경하려면 상자 너비를 다시 계산해야 합니다. 이제 IE6는 종료되었으므로 이 CSS 속성은 약간 오래 지연되었습니다.
이 새로운 속성을 사용해 보려면 Firefox의 경우 -moz-box-sizing을 사용하고, Safari/WebKit의 경우 -webkit-box-sizing을 사용하고, Opera의 경우 box-sizing을 사용하세요.
