DOCTYPE 선언은 CSS 높이 백분율 계산에 어떤 영향을 줍니까?

CSS 높이 속성, 백분율 값 및 DOCTYPE

div 요소에 높이를 100%로 지정하면 다음이 발생할 수 있습니다. 표준 모드(DOCTYPE이 포함된 경우)에서는 브라우저가 상위 항목을 기준으로 높이 백분율을 적용하므로 전체 페이지를 채우지 않습니다. 요소의 높이. 그러나 DOCTYPE을 제거하면 브라우저가 특수 모드로 전환되고 뷰포트를 기준으로 100% 높이를 해석합니다.

Div 채우기 페이지 만들기

DOCTYPE을 제거하지 않고 div가 페이지를 채우도록 하려면 루트에 높이를 선언하세요. 요소:

DOCTYPE을 제거하면 높이 계산에 영향을 미치는 이유

DOCTYPE이 제거되면 브라우저가 표준 모드에서 쿼크 모드로 전환됩니다. 쿼크 모드에서는 하위 요소의 높이 백분율이 다르게 계산됩니다.

• 표준 모드: 상위 요소의 높이가 자동이면 하위 요소의 높이 백분율도 다음과 같이 처리됩니다. auto.
• Quirks 모드: 상위 요소의 높이가 auto인 경우 백분율 높이가 하위 요소는 뷰포트를 기준으로 측정됩니다.

div의 상위 요소에 높이를 설정하지 않았으므로 100% 높이는 쿼크 모드의 뷰포트를 기준으로 측정되어 녹색 배경이 예상대로 페이지를 채우세요.

의 중요성 DOCTYPE

DOCTYPE을 사용하면 브라우저가 웹 페이지를 표준 모드로 렌더링하므로 중요합니다. 이 모드는 최신 웹 표준을 따르므로 다양한 브라우저에서 일관되고 안정적인 렌더링을 보장합니다. 반면에 Quirks 모드는 레거시 웹페이지를 수용하기 위해 오래된 브라우저를 시뮬레이션하므로 예측할 수 없고 바람직하지 않은 동작이 발생할 수 있습니다.

권장 DOCTYPE

HTML5의 경우 문서에서 권장되는 DOCTYPE은 다음과 같습니다.

위 내용은 DOCTYPE 선언은 CSS 높이 백분율 계산에 어떤 영향을 줍니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!