CSS3 테두리 크기

box-sizing 속성

을 사용하면 특정 영역과 일치하는 특정 요소를 특정 방식으로 정의할 수 있습니다.

기본값: content-box

JavaScript 구문: object.style.boxSizing="border-box"

Syntax

box-sizing: content-box|border-box|inherit;

content-box : 요소의 콘텐츠 상자에 너비와 높이가 별도로 적용됩니다. 요소의 너비와 높이 외부에 요소의 패딩과 테두리를 그립니다.

border-box: 요소에 설정된 너비와 높이에 따라 요소의 테두리 상자가 결정됩니다. 즉, 요소에 지정된 패딩과 테두리는 설정된 너비와 높이 내에서 그려집니다. 콘텐츠의 너비와 높이는 각각 설정된 너비와 높이에서 테두리와 패딩을 뺀 값입니다.

inherit: 상자 크기 속성의 값이 상위 요소에서 상속되도록 지정합니다.

요소에 box-sizing: border-box;가 설정되어 있으면 패딩(padding)과 테두리(border)도 너비와 높이에 포함됩니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>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>

CSS3 box-sizing 속성을 사용하지 마세요.

기본적으로 요소의 너비와 상단은 다음과 같이 계산됩니다.

너비(너비) + 패딩(padding) + 테두리(border) = 요소의 실제 너비

높이(높이) + 패딩 (내부 여백) + 테두리(border) = 요소의 실제 높이

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>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>

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> <style> .box_sizing{ width:180px; padding:40px 20px; background:#a0b3d6; overflow:hidden; } .box_sizing .in{ width:100%; border:12px double #34538b; background:white; padding:5px; box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } </style> </head> <body> <div class="box_sizing"> <div class="in">此处12像素的border和5像素的padding值算在宽度里面了~~</div> </div> </body> </html>

코드 재설정

자동운전

제출하다

시사 Clear