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 상자 크기 조정 속성 예
<!DOCTYPE html>
<html>
<head>
<style>
div.container
{
width:30em;
border:1em solid;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
border:1em solid red;
float:left;
}
</style>
</head>
<body>
<div class="container">
<div class="box">这个 div 占据左半部分。</div>
<div class="box">这个 div 占据右半部分。</div>
</div>
</body>
</html>온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요