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>

실행하여 사용해 보세요

지속적인 학습

새로운 파일

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

제출하다 코드 재설정

자동운전