简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > CSS 튜토리얼 > 본문

CSS 절대 및 상대 단위

PHPz
풀어 주다： 2023-08-29 17:49:09
앞으로
1284명이 탐색했습니다.

CSS 절대 단위와 상대 단위는 모두 거리 단위 범주에 속합니다.

CSS 상대 단위는 다른 요소에 상대적인 한 요소의 길이를 정의합니다.

예를 들어 vh 상대 단위는 뷰포트 높이를 기준으로 합니다.

다음은 CSS 상대 단위입니다.

예 아래 위 코드의 출력입니다. - 버튼을 클릭하기 전 -
Sr.No units 및 상대
1 %

부모 요소 크기
2 em

요소 글꼴 크기

td>
3 ex strong>

요소 글꼴 크기 High
5 rem

루트 요소의 글꼴 크기
6 rlh

루트 요소의 줄 높이
7 vb

루트 요소 블록의 뷰포트 축의 1%

8 vh

뷰포트 높이의 1%

9 vmax

뷰포트의 1% 더 큰 크기

10 vmin

1% 더 작은 뷰포트 크기
11 vw

뷰포트 너비의 1%
CSS 상대 단위의 예를 살펴보겠습니다 - 라이브 데모 

<!DOCTYPE html>
<html>
<head>
<title>CSS Relative Units</title>
<style>
html{
   font-size: 14px;
   line-height: normal;
}
form {
   width:70%;
   margin: 0 auto;
   text-align: center;
}
* {
   padding: 2px;
   margin:5px;
}
input[type="button"] {
   border-radius: 10px;
}
#textContain {
   font-size: 20px;
   line-height: 2;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Relative-Units</legend>
<input type="text" id="textSelect" placeholder="Type Text Here...">
<input type="number" id="numSelect" value="1" min="1">
<div id="radioBut">
<input class="radio" type="radio" name="heading" value="em" checked><label>em</label>
<input class="radio" type="radio" name="heading" value="rem"><label>rem</label>
<input class="radio" type="radio" name="heading" value="vw"><label>vw</label>
<input class="radio" type="radio" name="heading" value="vh"><label>lh</label>
<input class="radio" type="radio" name="heading" value="ex"><label>ex</label>
</div>
<div id="textContain">Text Preview: <span id="textPreview">Output will show up here</span></div>
<input type="button" onclick="changeText()" value="Preview">
</fieldset>
</form>
<script>
var textSelect = document.getElementById("textSelect");
var numSelect = document.getElementById("numSelect");
var textPreview = document.getElementById("textPreview");
function changeText() {
   if(textSelect.value === &#39;&#39;)
      textPreview.textContent = &#39;Type some text first&#39;;
   else{
      for(var i=0; i<5; i++){
         var radInp = document.getElementsByClassName(&#39;radio&#39;)[i];
         if(radInp.checked === true){
            textPreview.textContent = textSelect.value;
            textPreview.style.fontSize = numSelect.value+radInp.value
         }
      }
   }
}
</script>
</body>
</html>
로그인 후 복사

출력

'미리보기' 버튼을 클릭한 후 'rem' 옵션과 비어 있지 않은 텍스트 필드를 선택했습니다.-

p>

"미리보기"를 클릭한 후 " 버튼을 클릭하고 "em" 옵션을 선택하면 텍스트 필드가 비어 있지 않습니다. -

CSS 绝对和相对单位"pt" 옵션을 클릭하고 비어 있지 않은 텍스트를 선택한 후 필드의 "미리 보기" 버튼 -

CSS 绝对和相对单位 이후 "미리보기" 버튼을 클릭하고 "pc" 옵션과 비어 있지 않은 텍스트 필드 선택 -

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

원천：tutorialspoint.com
이전 기사：CSS 최대 높이 속성 다음 기사：Google AMP 앰프 아코디언을 사용하여 중첩된 아코디언을 만드는 방법은 무엇입니까?
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...
에서 2024-04-29 11:01:01
0
2
1800
Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?
에서 2024-04-23 00:22:19
0
10
1939
자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.
에서 2024-04-19 15:37:47
0
1
1652
상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');
에서 2024-04-18 23:52:34
0
1
1554
CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어
에서 2024-04-16 10:10:18
0
0
1587
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！