HTML 박스 모델에 대한 자세한 설명

이번에는 html 박스 모델에 대한 자세한 설명을 가져왔습니다. html 박스 모델 사용 시 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

1.1 상자의 콘텐츠 영역 크기(콘텐츠 너비 및 콘텐츠 높이)는 여러 요인에 따라 달라집니다.

--상자를 생성하는 요소에 '너비' 또는 '높이' 속성이 설정되어 있는지 여부.
--상자에 텍스트 및 기타 상자가 포함되어 있는지 여부.
--상자가 형태인지 등

1.2 상자의 배경색

--패딩 및 테두리 영역의 배경 스타일은 (상자의) 생성 요소의 'Background' 속성에 의해 지정됩니다. 여백 배경은 항상 투명합니다

2. 여백 속성: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' 및 'margin'

2.1 . 여백 속성은

--'margin'简写属性一次性设置四周的外边距，而其它外边距属性只设置它们各侧的。这些属性适用于所有元素，但非替换的行内元素上的垂直margin将不会产生任何效果

2.2. 값 유형의 여백 영역 너비를 지정하며

--<length>
指定一个固定宽度
--<percentage>
百分比根据生成盒的包含块的width来计算。注意，这一点对于&#39;margin-top&#39;和&#39;margin-bottom&#39;也适用。如果包含块的宽度取决于该元素，那么产生的布局在CSS 2.1是未定义的
--auto
--margin属性允许负值，但可能存在具体实现限制

2.3. , 'margin-bottom'

'margin-top', 'margin-bottom'
Value:      <margin-width> | inherit
Initial:    0
Applies to: 除display类型为table系列中除了table-caption，table和inline-table以外的所有元素（译注：也就是说，table系列display值中，margin-只适用于table-caption, table, inline-table，其余的都不适用，但margin-对非table系列都适用）
Inherited:      no
Percentages:    参照包含块的宽度
Media:      visual
Computed value:     指定的百分比或者绝对长度

이 두 속성은 대체되지 않은 인라인 요소

2.4 'margin-right', 'margin-left'

'margin-right', 'margin-left'
Value:      <margin-width> | inherit
Initial:    0
Applies to:     除display类型为table系列中除了table-caption，table和inline-table以外的所有元素（译注：也就是说，table系列display值中，margin-只适用于table-caption, table, inline-table，其余的都不适用，但margin-对非table系列都适用）
Inherited:      no
Percentages:    参照包含块的宽度
Media:      visual
Computed value:     指定的百分比或者绝对长度

2.5 'margin'

'margin'
Value:      <margin-width>{1,4} | inherit
Initial:    见单独的各个属性
Applies to:     除display类型为table系列中除了table-caption，table和inline-table以外的所有元素（译注：也就是说，table系列display值中，margin-只适用于table-caption, table, inline-table，其余的都不适用，但margin-对非table系列都适用）
Inherited:      no
Percentages:    参照包含块的宽度
Media:      visual
Computed value:     见单独的各个属性

3. 여백

인접한 수직 여백은 다음을 제외하고 병합됩니다.

----루트 요소 상자의 여백은 병합되지 않습니다.
----요소에 간격(틈새)이 있는 경우에는 클리어 속성이 요소의 위치가 이동하게 됩니다. 요소의 위쪽 여백(간격)은 아래쪽 여백에 인접해 있습니다. 해당 여백은 직계 형제(요소)의 인접한 여백과 병합되지만 병합 후에는 더 이상 그렇지 않습니다. Merge

이 기사의 사례를 읽으신 후 방법을 익히셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 읽기:

sublime에서 html 헤더 코드를 빠르게 만드는 방법

css에는 어떤 길이 단위가 있나요

CSS(Cascading Style Sheets) 컬렉션

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