CSS의 백분율 높이가 백분율 너비와 다르게 동작하는 이유는 무엇입니까?

CSS에서 백분율 높이가 너비와 다른 이유

질문: 너비에 백분율 값을 성공적으로 적용했음에도 불구하고 백분율 높이는 왜 실패합니까? 동일한 효과를 얻을 수 있습니까?

답변: 근본적인 차이점은 블록 요소의 기본 동작에 있습니다. 이러한 요소의 높이는 본질적으로 요소가 포함하는 콘텐츠에 따라 조정됩니다. 다음 예를 고려해 보세요.

<div>

여기서 #inner는

내의 텍스트를 수용하기 위해 수직으로 확장되고 #outer는 #inner를 포함하도록 높이를 조정합니다.

높이나 너비의 백분율을 지정하면 상위 요소를 참조합니다. 너비의 경우 블록 요소는 일반적으로 상위 요소의 전체 너비에 걸쳐 있으므로 결과를 예측할 수 있습니다. 너비 설정: 50%는 특정 픽셀 너비로 변환됩니다.

그러나 블록 요소 높이는 콘텐츠에 따라 결정되므로 높이가 다릅니다. height: 50% 할당은 상위 요소의 높이를 명시적으로 정의하지 않으면 모호합니다. 상위 요소와 하위 요소 간의 이러한 피드백 루프는 최종 높이를 결정할 때 불확실성을 야기합니다. 이 순환을 깨려면 상위 요소가 지정된 높이를 가져야 합니다.

위 내용은 CSS의 백분율 높이가 백분율 너비와 다르게 동작하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!