CSS3-박스 크기
상자 크기 조정 속성은 요소의 높이와 너비를 변경하는 데 사용됩니다.
css2 이후로 box 속성은 아래와 같이 작동했습니다.
너비 + 패딩 + 테두리 = 요소 상자의 실제 표시 / 렌더 된 너비
높이 + 패딩 + 테두리 = 요소 상자의 실제 표시 / 렌더링 된 높이
높이와 너비를 설정할 때 주어진 크기보다 약간 더 크게 나타나 요소의 높이와 너비에 요소 보더와 패딩이 추가됨을 의미합니다.
CSS2 크기 조정 속성
<html>
<head>
<style>
.div1 {
width: 200px;
height: 100px;
border: 1px solid green;
}
.div2 {
width: 200px;
height: 100px;
padding: 50px;
border: 1px solid pink;
}
</style>
</head>
<body>
<div class = "div1">TutorialsPoint.com</div><br />
<div class = "div2">TutorialsPoint.com</div>
</body>
</html>다음 결과가 생성됩니다-
위의 이미지는 두 요소의 너비와 높이가 같지만 결과가 다르기 때문에 두 번째 이미지에는 패딩 속성이 포함되어 있습니다.
CSS3 상자 크기 조정 속성
<html>
<head>
<style>
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class = "div1">TutorialsPoint.com</div><br />
<div class = "div2">TutorialsPoint.com</div>
</body>
</html>위의 샘플은 높이와 너비가 동일합니다. box-sizing:border-box. 여기 결과는 아래와 같습니다.
다음 결과가 생성됩니다-
위의 요소는 box-sizing : border-box와 동일한 높이와 너비를 가지므로 위와 같이 두 요소의 결과는 항상 동일합니다.