CSS 참조 가이드

CSS @규칙(RULES)

box-CSS의 sizing 속성은 기본 크기를 변경하는 데 사용됩니다CSS 박스 모델브라우저는 일반적으로 이 모델을 사용하여 요소의 너비와 높이를 계산합니다.

아래 표는 이 속성의 사용 설명과 버전 이력, 그리고 JavaScript 스크립트에서 이 속성의 사용 문법을 설명합니다.

기본 값:	content-box
적용:	모든 너비나 높이를 받아들이는 요소
thừa kế:	아니요
애니메이션 가능:	아니요 애니메이션 속성을 확인하십시오。
버전:	CSS3의 새 기능
JavaScript 문법:	object.style.boxSizing="border-box"

이 속성의 문법은 다음과 같습니다:

box-sizing:　content-box　|　padding-box　|　border-box　|　initial　|　inherit

아래 예제는 box를 사용하는 방법을 설명합니다.-sizing 속성.

예제

.box　{
　　　　width:　50%;
　　　　padding:　15px;
　　　　float:　left;
　　　　border:　5px　solid　#000;
　　　　box-sizing:　border-box;
}

아래 표는 이 속성의 값을 설명합니다.

값	설명
content-box	지정된 width와 height 속성은 요소의 내용만 포함합니다. 패딩, 경계 또는 마argins는 포함하지 않습니다.
padding-box	지정된 width와 height 속성은 패딩 크기를 포함하고, border나 margin은 포함하지 않습니다.
border-box	지정된 width와 height 속성은 패딩과 경계를 포함하지만, 마argins는 포함하지 않습니다.
initial	이 속성을 기본 값으로 설정합니다.
inherit	지정된 경우, 관련 요소는 부모 요소의 box를 사용합니다.-sizing 속성 값.

box-sizing 속성의 브라우저 호환성, 아래 표의 숫자는 이 속성을 지원하는 브라우저의 최소 버전 번호를 나타냅니다; 모든 주요 브라우저는 이 속성을 지원합니다.

	Firefox 2+ ^-moz-，29+ Google Chrome 4+ ^-webkit-，10+ Internet Explorer 8+ Apple Safari 3。2+ ^-webkit-，5。1 + 오페라 9。5+

다음 내용에 대한 튜토리얼을 참조하십시오:CSS 박스 모델，CSS 크기。

관련 속성:padding，border，margin。