CSS 상자 크기 조정 속성의 작동 방식

CSS box-sizing 사용 방법 알아보기 브라우저가 HTML 요소의 너비와 높이를 계산하고 렌더링하는 방법을 제어하는 속성입니다.

상자 크기 조정(내용 상자 대 테두리 상자)

CSS box-sizing 속성에는 두 가지 값이 있습니다.

두 상자 크기 값은 브라우저가 HTML 요소의 크기를 계산하고 렌더링하는 방법에 영향을 미치지만 공통점은 이것뿐입니다.

기본적으로 모든 HTML 요소는 content-box를 사용합니다. 값:

box-sizing: content-box;

즉, 다음 스타일의 요소가 있는 경우:

div {
  width: 100px;
  height: 100px;
  padding: 16px;
  border: 1px solid;
}

그런 다음 해당 요소의 너비와 높이는 100픽셀이 아니라 134픽셀로 계산됩니다. CSS 스타일시트에 지정한 대로. 결과:

크기를 직접 확인하려면 브라우저에서 요소 검사기를 활성화하세요. 이 명령으로:

그런 다음 위의 요소 위로 마우스를 이동하여 크기를 확인합니다.

이것은 content-box 때문에 발생합니다. 너비/높이 값을 테두리와 함께 추가합니다(1px). 양쪽에) 및 패딩(16px 각 면에) 값을 표시하고 해당 값의 합으로 요소 크기를 렌더링합니다.

content-box의 기본 동작 작업하기가 상당히 성가실 수 있지만 다행히 쉽게 변경할 수 있습니다!

기본 box-sizing: content-box 선언은 모든 웹 브라우저에 내장된 사용자 에이전트 스타일시트에서 상속됩니다.

content-box를 쉽게 재정의할 수 있습니다. border-box가 있는 값 브라우저가 요소의 크기를 계산하는 방식에 반대 효과가 있는 값:

box-sizing: border-box;

box-sizing를 설정하여 border-box 속성 브라우저는 height가 있는 요소에 지정한 정확한 너비와 높이로 요소를 렌더링합니다. 및 width 속성:

div {
  width: 100px;
  height: 100px;
  padding: 16px;
  border: 1px solid;
  box-sizing: border-box; 
}

결과:

border-box 값은 브라우저를 포함하게 합니다. (추가하지 않음) 요소의 총 너비와 높이를 계산할 때 지정된 패딩 및 테두리 값.

border-box 사용 , padding에 관계없이 또는 border 요소에 값을 추가하면 요소의 총 크기는 height에 지정한 값이 됩니다. 및 width 속성.

좋은 측정을 위해 다음을 나란히 비교합니다.

위의 두 요소 모두 너비와 높이가 100픽셀로 지정되어 있지만 border-box를 사용하기 때문에 두 번째 요소만 지정된 값을 따릅니다. .

content-box 대 border-box 요약:

이제 border-box 브라우저가 CSS에서 지정한 실제 크기로 HTML 요소를 렌더링하도록 합니다. 하지만 border-box는 어떻게 적용합니까? 모든 HTML 요소에?

맨 위에 다음 CSS 규칙 집합을 추가하는 것만으로 간단합니다. 스타일시트:

*, *:before, *:after {
  box-sizing: border-box;
}

위의 코드는 CSS의 범용 선택기 *를 사용합니다. border-box 적용 box-sizing 값 속성:

border-box를 사용하여 모든 HTML 요소에서 브라우저가 요소의 크기를 렌더링하는 방법에 대해 더 이상 걱정할 필요가 없습니다. 항상 사용자가 지정한 높이와 너비가 됩니다.