CSS 박스 모델의 의미와 원리에 대한 심층적인 이해

많은 프런트엔드 개발자는 CSS가 너무 단순해서 오랫동안 배울 필요가 없다고 생각합니다. 실제로 프런트엔드 개발자가 CSS를 잘 사용하면 효율성과 사용자 경험이 향상됩니다. 최근에는 문제가 발생했을 때 어떻게 해야 하는지 알고 신속하게 올바른 해결책을 처방할 수 있도록 CSS를 심도 있게 학습할 계획입니다. 다음으로 CSS 박스 모델을 주로 소개합니다.

박스 모델이란 무엇입니까?

박스 모델에 대해 말하자면, 프론트 엔드 개발자로서 모두가 이해했다고 믿습니다. mdn 공식 웹사이트의 설명은 여기에 적용됩니다:

문서에서 각 요소는 직사각형 상자로 표시됩니다. 크기, 속성(색상, 배경, 테두리와 같은 측면) 및 이러한 상자의 위치를 ​​결정하는 것이 렌더링 엔진의 목표입니다.

CSS에서는 이러한 직사각형 상자 각각이 표준 상자 모델을 사용하여 설명됩니다. 이 모델은 요소가 차지하는 공간의 내용을 설명합니다. 각 상자에는 여백, 테두리, 패딩 및 내용의 네 가지 면이 있습니다.

공식 언어는 항상 너무 모호하므로 설명을 위해 Chrome 콘솔의 스크린샷을 찍겠습니다.

가장 바깥쪽 주황색은 여백 영역이고, 안쪽 노란색은 테두리 영역(경계 영역), 더 안쪽에 있는 녹색은 패딩 영역이고 가장 안쪽의 녹색은 콘텐츠 영역입니다.

박스 모델의 역할

글쎄, 위 사진만 보면 박스 모델 컨셉에 대해서는 딱히 할 말이 없는 것 같습니다. 상자 모델이 레이아웃에 미치는 영향을 살펴보겠습니다. 예를 들어 요소의 크기를 200px로 설정하려는 경우 다음 코드를 작성하면

<style>
  .box {
    width: 200px;
    height: 100px;
    padding: 20px;
  }
</style>
<div class="box">
  盒子模型
</div>

결과적으로 요소를 검사해 보면 요소의 크기가 240px로 변경된 것을 확인할 수 있습니다. 200px.

이게 왜죠? 기본적으로 너비, 높이 등의 설정은 콘텐츠 영역에 대한 것이므로 설정된 너비: 200px는 콘텐츠 영역의 너비에 왼쪽 및 오른쪽 패딩의 크기를 더한 값이므로 전체 크기가 요소가 더 커집니다. 이는 현실 세계의 중간 상자에 대한 우리의 이해와 다릅니다. 예를 들어 집의 면적을 말할 때 사용 가능한 면적뿐만 아니라 벽, 발코니, 엘리베이터 및 기타 공간의 두께도 포함됩니다.

박스 모델 및 박스 크기 조정

CSS를 실제 세계와 일치시키기 위해 이때 상자 크기 조정이 중요합니다. 박스 크기 조정은 효과 개체의 너비와 높이를 설정하는 데 사용됩니다. 값은 content-box, pading-box, border-box 세 가지가 있습니다. 기본값은 content-box입니다. 어떤 사람들은 왜 여백 상자가 없느냐고 묻습니다. 구체적인 이유는 모르겠습니다. 책 "CSS World"에서 Zhang Xinxu 선생님이 언급한 두 가지 이유를 참고할 수 있습니다.

margin-box 자체는 큰 가치가 없으며

마진 사양이 충돌합니다. 여백 지정에는 "여백의 배경은 항상 투명합니다"라고 되어 있기 때문에 여백 상자가 있는 경우 배경은 어떻게 되나요?

마진박스가 없는 이유는 간단히 언급하겠습니다. 관심 있는 친구들은 직접 확인해 보세요.

모범 사례

일부 전문가들은 레이아웃 편의를 위해 모든 요소를 ​​상자 크기로 설정할 것을 제안합니다: border-box

낮은 버전의 브라우저를 고려하지 않는 경우 다음 코드를 사용할 수 있습니다:

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

나중에 일부 전문가들은 다음과 같이 상속 방법을 제안했습니다.

html {
  box-sizing: border-box;
}

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

이 방법이 모범 사례라고 합니다. 전문가가 권장하는 방법이므로 앞으로는 두 번째 방법을 사용할 수 있습니다. 메소드의 코드 조각은 Reset.css에 있습니다.

위 내용은 CSS 박스 모델의 의미와 원리에 대한 심층적인 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!