Computer >> 컴퓨터 >  >> 프로그램 작성 >> CSS

CSS 절대 및 상대 단위 이해

<시간/>

CSS 절대 단위

절대 길이 단위는 서로에 대해 고정되어 있습니다. 이 단위는 출력 형식이 이미 알려진 경우에 사용됩니다. 다음은 절대 길이 단위의 일부입니다 -

Sr.No 단위 및 설명
1 cm
센티미터
2 mm
밀리미터
3 안에서
인치(1in =96px =2.54cm)
4 픽셀 *
픽셀(1px =1인치의 1/96)
5 pt
포인트(1pt =1in의 1/72)
6 PC
<강한>

파이카 (1pc =12pt)

예시

이제 예를 살펴보겠습니다 -

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
   text-decoration: overline underline;
   text-decoration-color: blue;
   font-size: 0.3in;
}
</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 절대 및 상대 단위 이해

CSS 상대 단위

CSS의 상대 길이 단위는 다른 길이 속성에 상대적인 길이를 지정하는 데 사용됩니다.

현재 글꼴의 x 높이에 상대적

Sr.no 단위 및 설명
1 그들
요소의 글꼴 크기에 상대적 즉 4em은 현재 글꼴 크기의 4배를 의미합니다.
2
현재 글꼴의 x 높이에 상대적
3 채널
0의 너비를 기준으로
4
루트 요소의 글꼴 크기에 상대적
5 vw
뷰포트 너비의 1% 기준*
6 vh
뷰포트 높이의 1% 기준*
7 vmin
뷰포트*의 더 작은 치수의 1% 기준
8 vmax
뷰포트* 더 큰 치수의 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>

출력

CSS 절대 및 상대 단위 이해