디스플레이 사용 분석: CSS의 인라인 블록

이 문서의 내용은 CSS의 디스플레이: 인라인 블록에 대한 내용입니다. 이는 특정 참고 가치가 있으므로 도움이 필요한 친구에게 도움이 되기를 바랍니다.

The Gap of the Mystery

내비게이션 목록을 생성하고 해당 목록 항목을 인라인 블록으로 설정합니다. 주요 코드는 다음과 같습니다.

<div>
  <div><a>我</a></div>
  <div><a>我</a></div>
  <div><a>我</a></div>
</div>
.nav {
  background: #999;
}
.nav-item{
  display:inline-block; /* 设置为inline-block */
  width: 100px;
  background: #ddd;
}

렌더링은 다음과 같습니다.

볼 수 있습니다. 렌더링에서 목록 항목 사이에 약간의 간격이 있지만 코드에서 여백 가로 간격을 설정하지 않았습니다. 그렇다면 이러한 격차는 어떻게 발생하게 되었는가?

코드를 작성할 때 공백과 줄 바꿈을 입력하면 공백 문자가 생성되기 때문입니다. 브라우저는 공백 문자를 무시하지 않으며 브라우저는 자동으로 여러 개의 연속된 공백 문자를 하나로 병합하므로 소위 공백이 생성됩니다.

위의 예에서는 읽기 쉽도록 목록 항목 요소 사이에 캐리지 리턴과 줄 바꿈을 입력했는데, 이 공백은 이 캐리지 리턴과 줄 바꿈에 의해 생성된 공백 문자입니다.

모든 인라인 요소(인라인, 인라인 블록)와 마찬가지로 줄 바꿈으로 인해 공백 간격이 생성됩니다.

공백 문자를 제거하는 방법

위에서 우리는 공백 문자가 브라우저의 일반적인 동작임을 이해합니다. 하지만 일부 장면의 경우 아름답지 않고 간격 크기를 제어할 수 없기 때문에 이 공백을 제거해야 하는 경우가 많습니다. 일반적으로 말해서, 이 줄 바꿈으로 인한 공백을 제거하는 두 가지 방법이 있습니다. 줄 바꿈이 없는 코드와 글꼴 크기 설정입니다.

코드는 줄 바꿈되지 않습니다.

줄 바꿈은 줄 바꿈으로 인해 발생한다는 것을 배웠으므로 위 예의 목록 항목을 한 줄로 작성하면 공백이 사라지고 공백이 더 이상 존재하지 않게 됩니다. 코드는 다음과 같습니다.

<div>
  <div>导航</div>
<div>导航</div>
<div>导航</div>
</div>

그러나 코드의 가독성과 유지 관리성을 고려하면 일반적으로 한 줄로 작성하지 않는 것이 좋습니다.

글꼴 크기 설정

우선 공백 문자는 결국 문자라는 점을 이해해야 합니다. 따라서 글꼴 크기 속성을 설정하여 생성되는 간격의 크기를 제어할 수 있습니다. 글꼴 크기가 0으로 설정되면 텍스트 문자를 표시할 수 없으며 공백 문자도 사라지고 간격도 사라진다는 것을 알고 있습니다.

따라서 이 아이디어를 따르는 또 다른 해결책이 있습니다. 상위 요소의 글꼴 크기를 0으로 설정하여 이 간격을 제거한 다음 하위 요소의 글꼴 크기를 재설정하여 하위 요소의 텍스트 문자를 복원합니다.

따라서 이 메소드의 코드는 다음과 같습니다:

.nav {
  background: #999;
  font-size: 0; /* 空白字符大小为0 */
}
.nav-item{
  display:inline-block;
  width: 100px;
  font-size: 16px; /* 重置 font-size 为16px*/
  background: #ddd;
}

이 메소드를 사용할 때 하위 요소의 글꼴 크기를 재설정하는 데 특별한 주의가 필요합니다. 그렇지 않으면 함정에 빠지기 쉽습니다(텍스트 표시되지 않습니다.)

정렬 문제

inline-block은 인라인 수준 요소이므로 수직 정렬 속성도 적용됩니다.

수직 정렬을 정식으로 설명하기 전에 먼저 몇 가지 기본 개념에 대해 이야기해야 합니다.

중간선, 기준선, 윗줄, 아랫줄

중간선(가운데), 기준선(기준선), 윗줄(텍스트-상단, 하단선(텍스트-하단))은 텍스트의 여러 기본 줄이며 그에 상응하는 줄입니다.

• Baseline(베이스라인) : 영문소문자 x의 아래쪽 가장자리.

• 중간선 : 영문소문자 x의 중간.

• 윗줄(text-top): 부모 요소의 글꼴 크기로 구성된 콘텐츠 영역의 윗줄

• 아랫줄(text-bottom): 부모 요소의 글꼴 크기로 구성된 콘텐츠 영역의 윗줄 상위 요소의 글꼴 크기 크기 하단

• vertical-align 값

vertical-align은 8개의 키워드, 백분율 값 또는 길이 값만 허용합니다. 다음으로 각 키워드가 인라인 요소에서 어떻게 작동하는지 살펴보겠습니다.

1. baseline 기본 요소의 기준선은 상위 요소의 기준선에 맞춰 정렬됩니다.

2. sub 요소의 기준선을 상위 요소의 아래 첨자 기준선에 정렬합니다.

3. super 요소의 기준선을 상위 첨자 기준선에 정렬합니다.

4. text-top 요소의 상단을 상위 요소의 글꼴 상단에 정렬합니다.

5. text-bottom 요소의 아래쪽을 상위 요소 글꼴의 아래쪽에 정렬합니다.

6. middle 요소의 중간을 기준선에 상위 요소 x 높이의 절반을 더한 값으로 정렬합니다.

7. top 요소의 상단과 해당 하위 항목을 전체 행의 상단에 정렬합니다.

8. bottom 요소의 아래쪽과 해당 하위 요소를 전체 행의 아래쪽에 정렬합니다.

9. 요소의 기준선을 해당 상위 요소의 기준선 위에 지정된 길이로 정렬합니다.

10. 값과 마찬가지로 백분율은 line-height 속성의 백분율입니다

위 내용은 디스플레이 사용 분석: CSS의 인라인 블록의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!