집 > 기사 > 웹 프론트엔드 > CSS는 단위 없이 줄 높이 방법을 사용합니다.

CSS는 단위 없이 줄 높이 방법을 사용합니다.

不言원래의: 2018-06-21 15:31:542577검색

이 글은 CSS에서 단위 없이 line-height를 사용하는 방법을 주로 소개합니다. 이제 특정 참조 값을 공유합니다. 필요한 친구들이 참조할 수 있습니다.

line-height가 상속될 수 있으므로 자막 요소는 다음과 같습니다. line-height를 반복적으로 정의할 필요가 없습니다. 보통 마지막에 단위도 가져오는데(예: line-height:22px; 또는 line-height:1.4em;), line-height가 문제를 일으키는 부분도 상속이고 단위는 나중에 추가됩니다

가끔, 한 줄의 텍스트를 세로 중앙에 배치하기 위해 line-height에 높이와 동일한 고정 값을 지정합니다. 때로는 특정 텍스트 단락의 줄 간격을 조정하기 위해 일반적으로 백분율 또는 사용을 고려합니다. em의 상대 치수. 아마도 습관일지도 모르죠. 그래서 우리 모두는 단위를 갖는 line-height에 익숙합니다. 이러한 경우에는 줄 높이 상속을 고려할 필요가 없으며 어떤 문제도 발견되지 않습니다. 물론 줄 높이 상속을 사용하면 문제가 발견됩니다.
예를 들어 다음 코드는

CSS:

<style> 
.line-height-test { width: 200px; line-height: 1.4em; font-size: 12px; } 
.line-height-test span { font-size: 30px; font-weight: bold; } 
</style>

HTML:

<p class="line-height-test"> 
<span>白培铭先生于1960年出生于中国台湾，毕业于中国台湾省清华大学核物理系，</span> 
之后留学于美国加州大学伯克利分校和密西根大学，获得双硕士学位。在工作之后，凭着对营销领域的浓厚兴趣，他又考入密执安大学深造。 
</p>

line-height 속성 값에 단위가 있는 경우 상속된 값은 변환 후 특정 px 수준 값입니다(먼저 계산한 후 상속). ) ; 속성 값에 단위가 없으면 브라우저는 계산된 특정 값 대신 이 "인자(값)"를 직접 상속합니다. 이때 자체 글꼴 크기 값을 기준으로 줄 높이를 다시 계산합니다. 새로운 줄 높이 값(먼저 상속된 후 계산됨)

예를 들어 p와 하위 요소 p가 있고 p의 line-height가 150%이므로 기본 글꼴 크기가 16px이므로 p의 특정 line-height 값을 16px * 150%로 변환할 수 있습니다. = 24px. p -height의 행은 변환된 특정 값인 24px를 상속하므로 p는 글꼴 크기:30px로 재정의되므로 글꼴 크기가 line-height의 크기를 초과하므로 중복이 발생합니다. 다른 단위의 원리는 동일합니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

CSS는 단위 없이 줄 높이 방법을 사용합니다.

관련 기사