박스 모델

CSS에는 상자 모델이라는 기본 디자인 패턴이 있습니다. 상자 모델은 웹 페이지의 요소를 구문 분석하는 방법을 정의합니다. CSS의 모든 요소는 html 및 body 태그 요소를 포함한 상자 모델입니다. 상자 모델에는 주로 너비, 높이, 테두리, 배경, 패딩 및 여백과 같은 속성이 포함되며 이들 간의 계층적 관계는 서로 영향을 미칠 수 있습니다. 상자 모델의 3D 디스플레이를 살펴보세요.

From the picture padding 속성과 content 속성이 background-image 속성과 background-color 속성과 중첩되어 있음을 알 수 있는데, 이는 Z축(화면 세로 좌표)을 따라 다중 스태킹 관계를 형성합니다. 단, border속성, margin속성, padding속성은 평면상에서 평행관계를 가져야 하며, Z축상으로는 캐스케이딩 관계를 구성할 수 없습니다.

box-sizing:

CSS의 상자 모델은 두 가지 유형으로 나누어집니다. 첫 번째는 w3c의 표준 모델이고 다른 하나는 IE의 전통적인 모델입니다. 즉, 요소의 너비, 높이, 패딩 및 테두리 사이의 계산 관계가 아니라 요소의 실제 크기 사이의 차이점은 둘의 계산 방법이 일치하지 않는다는 것입니다. 원칙적으로, 상자 모델은 매우 상세합니다. 우리가 얻는 주요 모델은 다음 계산 공식에 표시된 대로 외부 상자 모델과 내부 상자 모델입니다.

W3C 표준 상자 모델

외부 상자 크기 계산(요소 공간 크기)

요소 공간 높이 = 콘텐츠 높이 + 패딩 + 테두리 + 외부 간격

요소 공간 너비 = 콘텐츠 너비 + 패딩 + 테두리 + 외부 간격

내부 상자 크기 계산(요소 크기)

요소 높이 = 콘텐츠 높이 + 패딩 + 테두리(높이는 콘텐츠 높이)

요소 너비 = 콘텐츠 너비 + 패딩 + 테두리(너비는 콘텐츠 너비)

2.IE 기존 박스 모델(IE6 이하, 제외) IE6 버전 또는 "QuirksMode의 IE5.5+")

외부 상자 크기 계산(요소 공간 크기)

요소 공간 높이 = 콘텐츠 높이 + 외부 여백(높이에는 요소 콘텐츠 너비, 테두리, 내부 간격 포함)

요소 너비 = 콘텐츠 너비 + 외부 여백(너비 요소 콘텐츠 너비, 테두리, 패딩 포함)

내부 상자 크기 계산(요소 크기)

요소 높이 = 콘텐츠 높이(높이에 요소 콘텐츠 너비, 테두리, 패딩 포함)

요소 width = 콘텐츠 너비(width 요소 콘텐츠 너비, 테두리, 패딩 포함)

CSS3에는 box-sizing 속성이 새로 추가되어 상자 모델의 크기 파싱 방법을 미리 정의할 수 있습니다. 구문 규칙은 다음과 같습니다. :

box-sizing: content-box | border-box | inherit

가장 중요한 것은 상자 크기 조정에서 콘텐츠 상자와 테두리 상자의 차이입니다. 차이점은 다음 그림에서 확인할 수 있습니다. 상자 모델에 대한 다양한 분석은 다음과 같습니다.