CSS3의 최신 길이 단위 소개

표시 지침:

숫자는 의심스러운 부분으로 표시됩니다

공식 문서는 기본적으로 영어로 되어 있으므로 고유명사 뒤에 영어 번역을 해보세요. 번역 후 다양한 독자들이 모호하게 번역 후 약간의 혼란이 있을 수 있습니다. 구별에서 비롯됩니다.

개요:

em: 현재 개체 내의 텍스트를 기준으로 한 글꼴 크기입니다. 상위 노드에 상대적인 글꼴 크기

rem: 루트 요소 에 상대적인 글꼴 크기입니다. 적용 시나리오: 레이아웃은 텍스트 콘텐츠에 따라 결정됩니다.

vh 및 vv: 1vh는 뷰포트 높이의 1/100^①과 같고, 1vw는 뷰포트 너비의 1/100과 같습니다.

vmin 및 vmax: 뷰포트 높이 및 너비의 최소값 또는 최대값과 관련하여 vmin은 뷰포트 너비 및 높이의 1/100의 최소값과 같습니다. 애플리케이션 시나리오: 요소가 화면에 항상 표시되도록 만듭니다.

ch: 숫자 0의 너비

ex: 현재 글꼴의 소문자 x 문자 높이 또는 1em^②의 1/2. 응용 시나리오: 위 첨자 및 아래 첨자

추출 정보:

1. 글꼴 크기: 선언하지 않으면 상위 노드의 속성이 상속됩니다.

확장:

①창, 문서, 본문 너비 및 높이 :

본문 높이는 본문 요소(테두리 스크롤 막대 등 포함)의 높이이며 기본적으로 여백은 8px입니다.

색상이 HTML에 설정되지 않고 본문에 색상이 설정된 경우. , 본문 색상이 배경 전체를 채울 것입니다

뷰포트는 테두리, 스크롤 막대 및 도구 모음의 문서 표시 영역을 제외한 브라우저의 가시 범위를 나타냅니다.

②0.5em이 어떻게 1ex와 같을 수 있습니까?

실제 테스트 결과 0.5em과 1ex를 설정했을 때의 성능이 살짝 다른 것으로 확인되었습니다. 결국 소문자 x 글자는 글꼴 크기의 절반과 같지 않습니다. 물론 이 조건

에 딱 맞는 글꼴이 있을 가능성도 배제할 수 없습니다. 상대: 적절한 위치에 오프셋이 적용됩니다. 돔의 원래 위치는 유지됩니다

위 내용은 CSS3의 최신 길이 단위 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!