CSS3 상자 크기
CSS3 상자 크기
CSS3 상자 크기 속성에는 패딩(padding)과 테두리(border)가 포함됩니다.
CSS3 상자 크기 조정 속성을 사용하지 마세요
기본적으로 요소의 너비와 높이는 다음과 같이 계산됩니다.
너비(너비) + 패딩(패딩) + 테두리(테두리) = 실제 요소 너비
높이(높이) + 패딩(내부 여백) + 테두리(테두리) = 요소의 실제 높이
즉, 요소의 너비/높이를 설정할 때 요소의 실제 표시 높이와 너비를 의미합니다. 더 커질 것입니다(요소의 테두리와 패딩도 너비/높이로 계산되기 때문입니다).
위 그림에서 두 <div> 요소의 너비와 높이 설정은 동일하지만 div2가 패딩을 지정하기 때문에 실제 표시되는 크기는 일치하지 않습니다.
예
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<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;가 설정되어 있으면 패딩(padding)과 테두리(border)도 너비와 높이에 포함됩니다.
예
다음은 두 가지< 간단한 예입니다. ;div> 요소에 box-sizing: border-box; 속성을 추가합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<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">
<title>php中文网(php.cn)</title>
<style>
* {
box-sizing: border-box;
}
input, textarea {
width: 100%;
}
</style>
</head>
<body>
<form action="action_page.php">
用户名:<br>
<input type="text" name="username" value="php"><br>
邮箱:<br>
<input type="text" name="email" value="429240967@qq.com"><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>실행하여 사용해 보세요
