박스모델이 뭔가요?

상자 모델은 페이지에서 HTML 요소가 차지하는 공간을 설명하는 방법입니다. 상자 모델은 각 HTML 요소를 콘텐츠 영역, 패딩, 테두리 및 여백의 네 가지 주요 부분으로 구성된 직사각형 상자로 처리합니다. 자세한 소개: 1. 콘텐츠 영역은 텍스트, 이미지 또는 기타 중첩 요소와 같은 콘텐츠를 실제로 포함하는 HTML 요소의 일부이며, 요소가 표시하는 실제 콘텐츠를 결정합니다. 패딩은 콘텐츠 영역입니다. 요소의 테두리와 CSS의 padding-top 속성 사이의 공백입니다.

이 튜토리얼의 운영 체제: Windows 10 시스템, DELL G3 컴퓨터.

"박스 모델"은 HTML 요소가 페이지에서 공간을 차지하는 방식을 설명하는 데 사용되는 CSS의 중요한 개념입니다. 상자 모델은 각 HTML 요소를 콘텐츠 영역, 패딩, 테두리 및 여백의 네 가지 주요 부분으로 구성된 직사각형 상자로 처리합니다. 박스 모델을 이해하는 것은 페이지 요소가 배치되고 렌더링되는 방식을 결정하므로 프런트 엔드 개발의 핵심입니다. 이 글에서는 박스 모델의 다양한 구성요소와 그 역할에 대해 자세히 설명하겠습니다.

상자 모델의 구성 요소:

콘텐츠 영역:

콘텐츠 영역은 텍스트, 이미지 또는 기타 중첩 요소와 같은 콘텐츠를 실제로 포함하는 HTML 요소의 일부입니다. 이는 상자 모델의 핵심이며 요소가 표시하는 실제 내용을 결정합니다.

패딩:

패딩은 콘텐츠 영역과 요소 테두리 사이의 공백입니다. padding-top, padding-right, padding-bottom 및 padding-left와 같은 속성을 사용하여 CSS에서 설정할 수 있습니다. 패딩은 요소의 내부 콘텐츠와 테두리 사이의 거리를 제어합니다.

테두리:

테두리는 콘텐츠와 패딩 주위의 선 또는 테두리입니다. 테두리 너비, 테두리 스타일 및 테두리 색상과 같은 속성을 사용하여 CSS에서 테두리를 설정할 수 있습니다. 요소의 내용을 장식하고 분리하는 데 사용됩니다.

Margin:

Margin은 요소 테두리와 주변 요소 사이의 빈 공간입니다. margin-top, margin-right, margin-bottom 및 margin-left와 같은 속성을 사용하여 CSS에서 설정할 수 있습니다. 여백은 요소와 다른 요소 사이의 거리를 제어하는 ​​데 사용됩니다.

상자 모델 작동 방식:

브라우저가 페이지를 렌더링할 때 상자 모델 정의에 따라 각 HTML 요소의 전체 너비와 높이를 결정합니다. 이러한 크기는 페이지에 있는 요소의 위치와 레이아웃을 결정합니다. 상자 모델의 작동 방식은 다음과 같습니다.

총 너비:

요소의 총 너비는 콘텐츠 영역의 너비에 왼쪽 및 오른쪽 패딩과 왼쪽 및 오른쪽 테두리의 너비를 더한 값과 왼쪽 및 오른쪽 테두리의 너비를 더한 값과 같습니다. 그리고 오른쪽 여백.

총 너비 = 콘텐츠 너비 + 왼쪽 패딩 + 오른쪽 패딩 + 왼쪽 테두리 너비 + 오른쪽 테두리 너비 + 왼쪽 여백 + 오른쪽 여백

총 높이:

요소의 전체 높이는 콘텐츠와 동일합니다. 영역의 높이 상단 및 하단 패딩과 상단 및 하단 테두리의 높이, 상단 및 하단 여백의 높이를 더합니다.

총 높이 = 콘텐츠 높이 + 상단 패딩 + 하단 패딩 + 상단 테두리 높이 + 하단 테두리 높이 + 상단 여백 + 하단 여백

박스 모델에 대한 두 가지 표준:

웹 개발에는 두 가지 기본 상자 모델이 있습니다. 표준: W3C 표준 박스 모델 및 IE 박스 모델.

W3C 표준 박스 모델:

W3C 표준 박스 모델은 콘텐츠 영역만 포함하도록 요소의 너비와 높이를 설정합니다. 패딩, 테두리 및 여백은 콘텐츠 영역에 추가되는 요소의 전체 너비와 높이에 영향을 주지 않습니다.

이것은 웹 표준의 기본 동작이며 대부분의 최신 브라우저에서 채택하는 박스 모델입니다.

IE 상자 모델:

IE 상자 모델에는 콘텐츠 영역, 패딩 및 테두리를 포함한 요소의 너비와 높이가 포함됩니다. 여백은 전체 너비와 높이에 영향을 주지 않으며 요소 외부에 있습니다.

이것은 Internet Explorer 브라우저의 초기 버전에서 채택한 상자 모델로, 일반적으로 CSS 속성 box-sizing: border-box;를 사용하여 시뮬레이션됩니다.

상자 모델을 제어하는 ​​방법:

CSS에서는 몇 가지 속성과 기술을 사용하여 상자 모델의 동작을 제어할 수 있습니다.

box-sizing 속성:

box-sizing 속성은 콘텐츠 상자와 테두리 상자라는 두 가지 값을 취할 수 있는 상자 모델의 동작입니다.

content-box는 요소의 너비와 높이에 콘텐츠 영역이 포함되고 패딩, 테두리 및 여백이 콘텐츠 영역 외부에 추가되도록 지정하는 W3C 표준 상자 모델을 사용하는 기본값입니다.

border-box는 콘텐츠 영역, 패딩 및 테두리를 포함한 요소의 너비와 높이를 지정하는 IE 상자 모델을 사용하며 여백은 요소 외부에 추가됩니다.

아아아아

위 내용은 박스모델이 뭔가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!