문서의 각 요소는 직사각형 상자로 표시됩니다. 렌더링 엔진의 목적은 크기, 속성(예: 색상, 배경, 테두리 측면) 및 이러한 상자의 위치를 결정하는 것입니다. CSS에서 이러한 직사각형 상자는 표준 상자 모델을 사용하여 설명됩니다. 이 모델 은 요소가 차지하는 공간 을 설명합니다. 각 상자에는 여백, 테두리, 패딩 및 내용의 네 가지 테두리가 있습니다.
W3C 모델: 전체 너비 = 왼쪽 여백 + 왼쪽 테두리 + 왼쪽 패딩 + 너비 + 오른쪽 패딩 + 테두리 오른쪽 + 오른쪽 여백
IE 모델: 총 너비 = 왼쪽 여백 + 너비 + 오른쪽 여백
box-sizing 속성은 CSS3에 도입되었으며, 이를 통해 기본 CSS 상자 모델이 요소의 너비와 높이를 계산하는 방식을 변경할 수 있습니다.
총 두 가지 옵션이 있습니다:
content-box: 표준 상자 모델, CSS에서 정의한 너비와 높이는 콘텐츠의 너비와 높이만 포함합니다. (기본값)
border-box: IE 상자 모델, CSS에서 정의한 너비와 높이에는 콘텐츠, 패딩 및 테두리가 포함됩니다
예:
(con1은 box-sizing: border-box로 설정되어 있으며 con은 기본 콘텐츠 상자입니다)
<span style="color: #008080;"> 1</span> <head lang="en">
<span style="color: #008080;"> 2</span> <meta charset="UTF-8">
<span style="color: #008080;"> 3</span> <title></title>
<span style="color: #008080;"> 4</span> <style>
<span style="color: #008080;"> 5</span> .con{width: 100px; height: 100px;background-<span style="color: #000000;">color:royalblue;
</span><span style="color: #008080;"> 6</span> <span style="color: #000000;"> border:1px solid red; padding: 10px;}
</span><span style="color: #008080;"> 7</span> .con1{box-sizing: border-<span style="color: #000000;">box;}
</span><span style="color: #008080;"> 8</span> </style>
<span style="color: #008080;"> 9</span> </head>
<span style="color: #008080;">10</span> <body>
<span style="color: #008080;">11</span> <div class="con"></div>
<span style="color: #008080;">12</span> <div class="con con1"></div>
<span style="color: #008080;">13</span> </body>
콘솔에 있는 두 상자의 차이점을 확연히 볼 수 있습니다
첫 번째 div의 박스 모델은 다음과 같습니다: content-box
두 번째 div의 상자 모델은 다음과 같습니다: border-box
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
