CSS의 상대 길이 단위

WBOY앞으로: 2023-08-26 20:57:031305검색

CSS에서는 상대 길이 단위를 사용하여 다른 길이 속성에 상대적인 길이를 지정합니다.

예

일련번호	단위 및 설명
1	em 요소의 글꼴 크기에 비례합니다. 즉, 4em은 현재 글꼴 크기의 4배를 의미합니다.
2	ex 현재 글꼴을 기준으로 한 x 높이
3	ch 폭을 기준으로 0
4	rem 루트 요소를 기준으로 한 글꼴 크기
5	vw 뷰포트 너비를 기준으로 한 1%*
6	vh 1에 비례 뷰포트 높이의 %*
7	vmin 뷰포트 뷰 입에 상대적 * 더 큰 크기의 1%
9	% 상대적 상위 요소
	상대 길이 단위를 사용한 예를 살펴보겠습니다. 데모 <!DOCTYPE html> <html> <head> <style> .demo { text-decoration: overline underline; text-decoration-color: blue; font-size: 1.4em; } </style> </head> <body> <h1>Details</h1> <p class="demo">Examination Center near ABC College.</p> <p class="demo2">Exam begins at 9AM.</p> </body> </html> Output

Example

이제 다른 예를 살펴보겠습니다.

라이브 시연

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
   text-decoration: overline underline;
   text-decoration-color: blue;
   font-size: 4ch;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>

출력

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

성명：

이 기사는 tutorialspoint.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

이전 기사：CSS를 사용하여 상자 너비 설정다음 기사：CSS를 사용하여 상자 너비 설정