CSS3 상자 크기

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>

지속적인 학습

새로운 파일

<!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>

코드 재설정

자동운전

제출하다

시사 Clear