Bootstrap 3가 `box-sizing: border-box`로 전환한 이유는 무엇입니까?

Bootstrap 3에서 Border-Box로 전환 풀기

Bootstrap 3에서는 모든 요소에 대해 box-sizing: border-box를 포함시켜 눈에 띄는 변화를 도입했습니다. 기본 콘텐츠 상자 값과의 이러한 편차는 그 근거에 대한 의문을 불러일으켰습니다.

Bootstrap 2.3.2에서 3.0.0으로의 마이그레이션 프로세스에서 개발자는 이러한 변경으로 인한 상당한 차원 차이를 관찰했습니다. bootstrap.css의 다음 CSS 규칙은 이 수정의 핵심을 가리킵니다.

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

Border-Box가 크기에 미치는 영향

기존 콘텐츠 상자 모델에서 요소의 너비와 높이 패딩과 테두리를 제외한 내용만 고려하세요. 이렇게 하면 전체 너비나 높이를 계산할 때 선언된 값을 초과하여 확장되므로 문제가 발생합니다.

반면, border-box에는 너비 및 높이 계산 내에 패딩과 테두리가 모두 포함됩니다. 이 단순화된 모델은 패딩이나 테두리 크기에 관계없이 최종 렌더링된 상자 크기가 지정된 너비와 높이에 정확하게 정렬되도록 보장합니다.

Bootstrap 그리드 시스템에서 Border-Box의 역할

테두리 상자로 이동하면 모든 요소에 영향을 미치며 특히 Bootstrap 3의 유동 격자 시스템에 영향을 미칩니다. 유동 그리드에서 열은 컨테이너 전체 너비의 백분율로 정의되므로 이에 따라 크기를 조정할 수 있습니다.

콘텐츠 상자 모델에서 열 크기를 계산하려면 양쪽의 고정 너비 여백을 고려해야 합니다. . 테두리 상자를 사용하면 이러한 복잡성이 제거됩니다. 선언된 열 너비에는 이제 테두리와 패딩이 모두 포함되어 일관되고 직관적인 크기 조정 수단을 제공합니다.

업계 수용 및 이점

Bootstrap의 그리드 시스템에 대한 이점 외에도 box-sizing: border-box는 웹 개발에서 널리 채택되고 있습니다. 이는 브라우저 전체에서 일관된 동작을 촉진하고 레이아웃 및 크기 조정에 대한 직관적인 접근 방식을 제공합니다.

Bootstrap 3의 릴리스 노트에는 이러한 변경의 의도가 명시적으로 명시되어 있습니다. "기본적으로 더 나은 상자 모델. Bootstrap의 모든 항목은 상자 크기 조정을 받습니다. : 테두리 상자를 사용하면 크기 조정 옵션이 더 쉬워지고 그리드 시스템이 강화됩니다."

추가 리소스:

• [Border-Box에 대한 브라우저 지원](http://css-tricks.com/box-sizing/)
• [Border-Box의 이점](http ://www.paulirish.com/2012/box-sizing-border-box-ftw/)

위 내용은 Bootstrap 3가 `box-sizing: border-box`로 전환한 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!