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>로그인 후 복사 |
라이브 시연
<!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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
