CSS 기사 - 줄 높이 계산 방법(상위 및 하위 요소)

개인적으로 모호해지기 쉬운 몇 가지 상황은 다음과 같습니다.
html 구조는 다음과 같습니다.

<p>
     </p><p>
        测试行高
    </p>

상위 요소는 숫자이고 하위 요소는 설정되지 않았습니다.

.parent{
     font-size: 12px;
     ine-height: 1;
 }
.child{
    font-size: 16px;
 }

상위 요소 상위는
입니다. 하위 요소 하위는
하위 요소가 상위 요소의 자체 글꼴 크기와 관련된 상위 요소 표시 설정의 숫자 값을 상속함을 나타냅니다.

상위 요소의 백분율, 하위 요소가 설정되지 않았습니다

.parent{
    font-size: 12px;
    line-height: 100%;
}
.child{
    font-size: 16px;
}

상위 요소의 상위는
하위 요소 하위는
입니다. 이는 하위 요소가 계산된 상위 요소의 행 높이를 상속함을 나타냅니다. 백분율을 기준으로 하며 상위 요소 자체의 글꼴 크기와는 아무런 관련이 없습니다.

은 1의 경우

과 관련이 있으며, 사례 2에서는 line-height: inherit를 하위 요소에 추가합니다. 자식, 파생 사례 3과 4, 성능은 변경되지 않았습니다.

다음은 흐릿해지기 쉬운 몇 가지 상황입니다.
html 구조는 다음과 같습니다.

<p>
     </p><p>
        测试行高
    </p>

상위 요소는 숫자이고 하위 요소는 설정되지 않았습니다.

.parent{
     font-size: 12px;
     ine-height: 1;
 }
.child{
    font-size: 16px;
 }

상위 요소 상위는
입니다. 하위 요소 하위는
하위 요소가 상위 요소의 자체 글꼴 크기와 관련된 상위 요소 표시 설정의 숫자 값을 상속함을 나타냅니다.

상위 요소의 백분율, 하위 요소가 설정되지 않았습니다

.parent{
    font-size: 12px;
    line-height: 100%;
}
.child{
    font-size: 16px;
}

상위 요소의 상위는
하위 요소 하위는
입니다. 이는 하위 요소가 계산된 상위 요소의 줄 높이를 상속함을 나타냅니다. 백분율을 기준으로 하며 상위 요소 자체의 글꼴 크기와는 아무런 관련이 없습니다.

더 많은 CSS 기사 - 줄 높이 계산 메소드(상위-하위 요소)와 관련된 기사는 다음을 주의하세요. PHP 중국어 웹사이트!