CSS 상자 모델이란 무엇입니까?

CSS 박스 모델은 웹 디자인에 자주 사용되는 CSS 기술에서 사용되는 사고 모델입니다. Box Model이라고도 하며 요소 내용(content), 패딩(padding), 테두리(border), 외부 여백(margin) 등 여러 요소로 구성됩니다(아래 그림 참조).

우리가 일상에서 접하는 상자(상자)에 이러한 속성을 옮겨보면 알 수 있습니다. 박스 모드라고 부르세요.

사진에서 가장 안쪽 상자가 요소의 실제 내용, 즉 요소 상자이고 가장 안쪽 상자는 요소 상자 외부 옆에는 패딩, 테두리, 가장 바깥쪽 레이어는 상자 모델을 형성하는 여백입니다. 일반적으로 우리가 설정하는 배경 표시 영역은 콘텐츠 범위, 패딩 및 테두리입니다. 외부 여백은 투명하며 주변의 다른 요소를 가리지 않습니다.

그러면 요소 상자의 전체 너비 = 요소(요소)의 너비 + 패딩의 왼쪽 및 오른쪽 여백 값 + 의 왼쪽 및 오른쪽 여백 값 여백 + 테두리의 왼쪽 및 오른쪽 너비 #🎜 🎜#

요소 상자의 전체 높이 = 요소의 높이 + 패딩의 위쪽 및 아래쪽 여백 값 + 상단 및 하단 여백 + 테두리의 상단 및 하단 너비.

Structure

내용물(CONTENT)은 상자에 들어 있는 내용물입니다.

패딩(PADDING)은 폼입니다. 또는 상자에 있는 내용물(귀중품)의 손상을 우려하여 추가된 기타 지진 방지 액세서리

테두리(BORDER)는 상자 자체이며, 이는 언제를 나타냅니다. 상자는 다 쌓을 수는 없고 통풍이 잘되고 쉽게 꺼낼 수 있도록 일정한 간격을 두어야 합니다. 웹 디자인에서 콘텐츠는 종종 텍스트, 그림 및 기타 요소를 참조하지만 작은 상자(DIV 중첩)일 수도 있습니다. 실제 상자와 달리 실제 사물은 일반적으로 상자보다 클 수 없습니다. 그렇지 않으면 상자가 늘어납니다. 깨지고 CSS 상자는 탄력적입니다. 내부의 물건은 상자 자체보다 크고 최대로 늘어나지만 손상되지는 않습니다.

Padding에는 너비 속성만 있으며 각 HTML 태그는 상자로 간주될 수 있습니다.

위 내용은 CSS 상자 모델이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!