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의 상대 길이 단위는 다른 길이 속성에 상대적인 길이를 지정하는 데 사용됩니다.
현재 글꼴의 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>
출력