CSS3 box size
CSS3 box-sizing 속성은 padding(패딩)과 border(테두리)를 포함하는 너비와 높이 속성을 설정할 수 있습니다.
CSS3 상자 크기 조정 속성을 사용하지 않습니다
기본적으로 요소의 너비와 높이는 다음과 같이 계산됩니다.
너비(너비) + 패딩(패딩) + 테두리(테두리) = 요소의 실제 너비 요소
높이 + 패딩 + 테두리 = 요소의 실제 높이
즉, 요소의 너비/높이를 설정할 때 요소의 실제 표시 높이와 너비가 더 커집니다(테두리와 패딩이 더 크기 때문). 너비/높이로도 계산됨)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="div1">这个是个较小的框 (width 为 300px ，height 为 100px)。</div>
<br>
<div class="div2">这个是个较大的框 (width 为 300px ，height 为 100px)。</div>
</body>
</html>이 방법을 사용하여 패딩이 포함된 더 작은 상자를 얻으려면 테두리의 너비와 패딩을 고려해야 합니다.
CSS3의 상자 크기 조정 속성은 이 문제를 매우 잘 해결합니다.
CSS3 box-sizing 속성 사용
CSS3 box-sizing 속성에는 요소의 너비와 높이에 패딩(padding)과 테두리(border)가 포함됩니다.
요소에 box-sizing: border-box;가 설정된 경우 패딩(내부 여백)과 테두리(테두리)도 너비와 높이에 포함됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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">两个 div 现在是一样大小的!</div>
<br>
<div class="div2">php中文网!</div>
</body>
</html>결과에서 box-sizing: border-box ; 효과가 더 좋습니다. 이는 바로 많은 개발자에게 필요한 것입니다.
다음 코드는 모든 요소의 크기를 보다 직관적인 방식으로 표시할 수 있습니다. 많은 브라우저는 이미 box-sizing: border-box; 를 지원합니다. (그러나 전부는 아닙니다. 그렇기 때문에 width: 100%인 입력 요소와 텍스트 요소의 너비가 다릅니다.)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
* {
box-sizing: border-box;
}
input, textarea {
width: 100%;
}
</style>
</head>
<body>
<form action="action_page.php">
用户名:<br>
<input type="text" name="username" value=""><br>
邮箱:<br>
<input type="text" name="email" value=""><br>
评论:<br>
<textarea name="message" rows="5" cols="30">
</textarea>
<br><br>
<input type="submit" value="Submit">
</form>
<p><strong>提示：</strong> 可以尝试移除样式中的 box-sizing 属性，看看会发生什么。注意移除后部分浏览器 input, textarea, 和 submit 按钮的宽度不一致。</p>
</body>
</html>