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

css 상자 모델은 기본적으로 주변 HTML 요소를 캡슐화하는 상자인 "상자 모델"을 나타냅니다. 여기에는 여백, 테두리, 패딩 및 실제 콘텐츠가 포함되며 모든 HTML 요소는 상자로 간주될 수 있습니다. 다른 요소와 주변 요소 테두리 사이의 공간에 요소를 배치합니다.

웹 디자인에서 일반적으로 듣는 속성 이름: 콘텐츠, 패딩, 테두리 및 여백. CSS 상자 모드에는 모두 이러한 속성이 있습니다.

디자인하고 레이아웃할 때 "박스 모델"이라는 용어가 사용됩니다.

우리는 이러한 속성을 일상생활에서 흔히 볼 수 있는 상자, 즉 상자에 비유하여 이해할 수 있으므로 이를 상자 패턴이라고 부릅니다.

CSS 박스 모델은 웹 디자인에 자주 사용되는 CSS 기술이 사용하는 사고 모델입니다.

Principle

먼저 웹 페이지에 대해 이야기해 보겠습니다. 콘텐츠, 패딩, 테두리, 여백, CSS 상자 모드에는 모두 이러한 속성이 있습니다.

우리가 일상에서 접하는 상자는 물건을 담을 수 있는 상자이고, 이런 속성을 갖고 있어서 상자무늬라고 합니다.

기능

상자에 여백, 테두리, 패딩, 내용의 네 가지 속성이 있다고 상상해 보세요.

이 상자를 살펴보겠습니다. 위쪽, 아래쪽, 왼쪽, 오른쪽의 네 가지 측면이 있습니다. 따라서 각 속성에는 내용 외에 위쪽, 아래쪽, 왼쪽, 오른쪽의 네 부분이 포함됩니다. 이 네 부분은 동시에 설정되거나 별도로 설정될 수 있으며, 내부 여백은 상자의 내용과 테두리 거리로 이해될 수 있습니다. , 테두리는 두께와 색상으로 구분됩니다. 내용은 상자 중앙에 있는 내용이고 여백은 테두리 외부에 자동으로 남겨지는 공백입니다.

구조

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

그리고 패딩(PADDING)은 상자 안의 물건이 손상되지 않도록 추가한 폼 또는 기타 내진 액세서리입니다.

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

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

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