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>