CSS 여백 요소에 대한 심층적인 이해-CSS 튜토리얼-php.cn

CSS 여백 요소에 대한 심층적인 이해

高洛峰

풀어 주다： 2017-03-15 10:49:18

원래의

1577명이 탐색했습니다.

이전 단어

여백은 박스 모델의 여러 속성 중에서 매우 특별한 속성입니다. 몇 가지 예를 들자면, 마진만 현재 요소의 배경을 표시하지 않고 마진만 음수 값으로 설정할 수 있으며 마진과 너비 및 높이는 자동을 지원하고 마진은 매우 이상한 중첩 특성을 갖습니다. 이전 블로그 게시물에서는 마진에 대한 기본 지식과 음수 마진의 자세한 사용법을 자세히 소개했습니다. 이번 글에서는 외부 여백중복, 자동, 무효 조건

중복

[전제 조건]외부 여백

의 핵심 부분을 자세히 소개합니다. 🎜 >

마진 중첩은 마진 병합이라고도 합니다.

1. 블록 요소에서만 발생합니다(float

, 절대 및 인라인 블록 제외). 요소 )

2. 세로 방향에서만 발생합니다(쓰기 모드

에 관계 없음)

【분류】

여백 겹침에는 다음 3개가 포함됩니다. 유형 상황

1. 인접한 형제 요소

<style>
p{
    line-height: 2em;
    margin:1em 0;
    background-color: lightblue;
    display:inline-block;
    width: 100%;
}
</style>
<p>兄弟一</p>
<p>兄弟二</p>

로그인 후 복사

2. 부모 요소와 첫 번째 또는 마지막 자식 요소 사이의 여백이 겹치는 경우도 여백이라고 합니다.

<style>
.box{
    background-color: pink;
    height:30px;
}
.inner{
    margin-top: 1em;
    background-color: lightblue;
}
</style>
<p class="box">
    <p class="inner">子级</p>
</p>

로그인 후 복사

조건

전달 인접한 형제 요소의 여백 겹침과 비교하여 부모-자식 여백 겹침은 다음 조건을 충족해야 합니다(예: 여백-상단 겹침) ):

a. 상위 요소는 BFC 요소가 아닙니다

b. 상위 요소에는 padding-top

값이 없습니다

. 상위 요소에 bord

er-top 값

이 없습니다. d. 상위 요소와 첫 번째 하위 요소 사이에 인라인 요소 구분이 없습니다

상위-하위 수준 margin-bottomOverlap, 항목 d는 상위 요소와 마지막 하위 요소 사이에 인라인 요소 구분이 없도록 변경되고 상위 요소에도 높이가 없어야 합니다. min-height, max-height

제한 사항

3. 빈 블록 요소

<style>
.box{
    background-color: lightgreen;
    overflow: hidden;
}   
.void{
    margin: 1em 0;
}
</style>
</head>
<body>
<p class="box">
    <p class="void"></p>
</p>
一行文字

로그인 후 복사

아래 결과를 보면 빈 블록 요소가 있어야 함을 알 수 있습니다. 상위 margin-top+margin-bottom을 총 높이 2em으로 늘립니다. 그러나 Margin 중복으로 인해 1em만 늘어납니다

마찬가지로 빈 블록 요소의 여백 겹침에 대한 일부 조건이 충족되어야 합니다

a. 요소에 테두리 값이 없습니다

b. 요소에 패딩 값이 없습니다

내부에 인라인 요소가 없습니다. min-height

【규칙】

두 개의 양수 세로 여백, 브라우저는 큰 값을 사용합니다. 두 세로 여백이 모두 음수 값으로 설정되면 브라우저는 두 개의 최대 절대값을 선택합니다. 여백; 양수 마진과 음수 마진을 결합하면 양수 마진에서 음수 마진을 뺍니다. 거리의 절대값

간단히 말해서 가장 큰 양수 값을 취하고 양수를 더한 값을 의미합니다. 음수값, 가장 음수값

[사용]

웹 페이지 레이아웃에서는 여백이 겹치기 때문에 여백을 "문제 스타일"로 간주하는 경우가 많습니다. 가능한 한 적게 사용하십시오. 그러나 실제로는 큰 역할을 합니다

HTML 문서는 원래 정보를 표시하기 위해 만들어졌습니다. HTML 문서에서는 기본 스타일만 사용한다는 전제하에 위쪽 여백과 아래쪽 여백이 겹치지 않으면 다음과 같은 문제가 발생합니다. 1. 연속된 단락이나 목록의 경우 여백이 겹치지 않으면 첫 번째와 아래쪽 여백 사이의 간격이 발생합니다. 마지막 항목은 다른 형제 요소와 함께 1번 나타납니다. 2. 레이아웃이 부자연스럽습니다. 2. 웹의 어느 곳에든 기본 p를 중첩하거나 직접 배치하면 웹디자인 원칙

에 어긋나는 원래 레이아웃에 영향을 미칩니다. 3. 빈 p가 남습니다. p 태그가 여러 개 있으면 원래 읽기 레이아웃에 영향을 미칩니다

그러므로 중첩을 잘 활용해야 하며 margin-top과 margin-bottom을 동시에 사용할 수 있습니다. 목록 항목에서. 이런 방식으로 페이지 구조가 더욱 강력해지고 마지막 요소를 제거하거나 위치를 지정해도 원래 레이아웃이 파괴되지 않습니다.

[새 속성]

-webkit-margin- Collapse

-webkit-margin-collapse: <collapse>(默认重叠) | <discard>(取消) | <separate>(分隔)

로그인 후 복사

이 속성은 여백 겹침 여부를 설정하는 데 사용되며, 여백 겹침이 발생하는 두 요소 중 하나에 작용합니다. 둘 다 이 속성을 사용하는 경우 하나는 삭제로 설정되고 다른 하나는 분리로 설정되어 최종 효과는 중첩 콜라주

자동

너비/높이 및 여백만 자동을 설정할 수 있습니다. auto에 대한 자세한 정보는 CSS 시각적 서식에 자세히 소개되어 있습니다. 다음은 margin:auto에 대한 부분만 소개합니다

【margin:auto가 수직 센터링을 달성할 수 없는 이유】

블록 수준 요소의 너비는 기본적으로 상위 요소를 채우는 것입니다. 너비는 고정값으로 설정하고 좌우 여백은 자동으로 설정하면 남은 공간을 균등하게 나눌 수 있습니다

블록 수준 요소의 높이는 기본적으로 상위 요소의 높이와 직접적인 관련이 없는 콘텐츠 높이로 설정되므로 세로 방향을 중앙에 맞출 수 없습니다. 0으로 재설정

[margin:auto를 사용할 때 그림을 수평으로 중앙에 맞출 수 없는 이유]

그림을 수평으로 중앙에 맞출 수 없는 이유는 블록 수준 요소와 유사합니다. 수직으로 중앙에 위치합니다. 그림의 너비는 기본적으로 그림 자체의 너비로 설정되며 상위 요소의 너비와 직접적인 관련이 없기 때문입니다. 왼쪽 및 오른쪽 여백을 자동으로 설정하면 0으로 재설정됩니다

따라서 이미지를 가로 중앙에 배치하려면 display:block 요소

【세로 달성 달성]으로 설정해야 합니다. centering】

margin:auto를 사용하면 두 가지 방법이 있습니다.

1. writing-mode:vertical-lr을 사용합니다.

writing-mode는 페이지를 나타냅니다. 흐름 방향이며 기본값은 수평입니다. 수직 방향으로 변경한 후 수직 센터링은 가능하지만 수평 센터링은 더 이상 불가능합니다

2. 요소를 절대 위치에 있는 요소로 변경합니다(IE7 브라우저에서는 지원하지 않습니다).

요소를 절대 위치 요소로 전환한 후 절대 위치 요소가 위치 위치 상위 요소의 높이와 직접적인 관계가 있도록 top:0;bottom:0;을 설정합니다. 그런 다음 margin:0 auto;를 설정하여 margin-top과 margin-bottom이 나머지 공간을 균등하게 나누어 수직 중심 효과를 얻도록 합니다.

잘못된 상황

1. 인라인 요소는 세로 여백이 유효하지 않습니다

인라인 요소의 세로 레이아웃은 주로 line-height 및 세로 정렬vertical-align에 영향을 받기 때문에 세로 여백은 영향을 미치지 않으므로 수직 레이아웃에는 영향을 미치지 않습니다. 표시 모드에서 여백 영역은 요소의 배경을 표시하지 않으므로 자체 요소의 표시에 영향을 미치지 않으므로 인라인 요소의 세로 여백은 유효하지 않습니다

[참고] 포함하지 마십시오. inline-block 또는 쓰기 모드를 수직으로 설정 -lr case

2. 일부 테이블 클래스 요소의 여백이 유효하지 않습니다.

<thead>``<tbody>``<tfoot>``<tr>``<col>``<colgroup>``<td>``<th> 여백을 설정할 수 없습니다. 표시 속성의 경우 표시가 테이블 관련 유형(table-caption, table, inline-table 제외)이고 여백 문이 유효하지 않습니다

3. 위치가 지정되지 않은 방향의 여백 값 절대 위치 지정 요소가 유효하지 않은 것 같습니다

절대 위치 지정의 여백 값은 항상 유효하지만 절대 위치 지정 요소는 문서 흐름을 벗어나고 다른 요소 노드와 아무런 관련이 없기 때문에 효과가 눈에 띄지 않습니다

4. BFC로 인한 마진이 잘못된 것 같습니다

왼쪽 요소가 float을 사용하고 오른쪽 요소가 오버플로 숨김을 사용하여 2열 적응형 레이아웃을 구현하는 경우 오른쪽 요소의 margin-left 값이 충분히 커야 효과를 볼 수 있습니다. 이는 margin-left가 이미지의 오른쪽이 아닌 상위 요소의 왼쪽을 기준으로 하기 때문입니다

5. 인라인 기능으로 인한 잘못된 여백

A p에 이미지가 포함되어 있습니다. 이미지의 여백 상단이 특정 값에 도달하면 이미지가 더 이상 위로 이동하지 않습니다. 이는 이미지가 인라인 요소의 수직 정렬 기능에 영향을 받는 인라인 요소이기 때문입니다. 기본 기준선 정렬. 페이지에 있는 가상의 대문자 X 문자를 예로 들어 보겠습니다.

위 내용은 CSS 여백 요소에 대한 심층적인 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!