`box-sizing: border-box`는 테두리가 있는 HTML 요소의 크기에 어떤 영향을 줍니까?

내부 테두리와 외부 테두리

테두리가 있는 HTML 요소의 스타일을 지정할 때 테두리가 테두리의 위치를 ​​기준으로 어디에 위치하는지 고려해야 합니다. 요소의 크기. 기본적으로 CSS 테두리는 요소 외부에 배치되어 양쪽에 너비를 추가합니다.

상자 크기 조정으로 Div 크기 유지

div의 크기가 변경되지 않도록 하려면 테두리가 추가되면 상자 크기 조정 속성이 적용됩니다. border-box로 설정하면 요소의 지정된 너비와 높이 내에 테두리가 포함됩니다.

CSS 구현

다음은 box-의 효과를 보여주는 CSS 예시입니다. 크기 조정:

이 예에서 div의 테두리는 20px입니다. box-sizing: border-box가 없으면 div의 총 너비는 140px(콘텐츠의 경우 100px, 양쪽 테두리의 경우 20px)가 됩니다. 그러나 box-sizing: border-box를 사용하면 테두리가 지정된 너비인 100px 내에 포함되어 div의 실제 너비가 100px로 유지됩니다.

위 내용은 `box-sizing: border-box`는 테두리가 있는 HTML 요소의 크기에 어떤 영향을 줍니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!