CSS 상자 크기 조정 속성

CSS 상자 크기 조정 속성 통사론

기능:box-sizing 속성을 사용하면 특정 방식으로 특정 영역과 일치하는 특정 요소를 정의할 수 있습니다. 예를 들어, 경계가 있는 상자 두 개를 나란히 배치해야 하는 경우 상자 크기를 "border-box"로 설정하면 됩니다. 이렇게 하면 브라우저가 지정된 너비와 높이로 상자를 렌더링하고 테두리와 패딩을 상자에 넣습니다.

구문:box-sizing: content-box|border-box|inherit

설명:content-box 이는 CSS2.1에서 지정한 너비 및 높이 동작입니다. 너비와 높이는 요소의 콘텐츠 상자에 별도로 적용됩니다. 요소의 너비와 높이 외부에 요소의 패딩과 테두리를 그립니다. border-box 요소에 설정된 너비와 높이에 따라 요소의 테두리 상자가 결정됩니다. 즉, 요소에 지정된 패딩과 테두리는 설정된 너비와 높이 내에서 그려집니다. 콘텐츠의 너비와 높이는 각각 설정된 너비와 높이에서 테두리와 패딩을 뺀 값입니다. 상속은 상자 크기 조정 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다.

참고:Internet Explorer, Opera 및 Chrome은 상자 크기 속성을 지원합니다. Firefox는 대체 -moz-box-sizing 속성을 지원합니다.

CSS 상자 크기 조정 속성 예

    
  
 
这个 div 占据左半部分。
 
这个 div 占据右半部分。