CSS의 상대 단위는 무엇입니까

CSS에는 많은 관련 단위가 있으며, 일반적인 단위는 픽셀(px), 백분율(%), em(em) 및 rem(rem)입니다. 이 네 가지 상대 단위는 아래에 소개되며 구체적인 코드 예제가 제공됩니다.

1. 픽셀(px):
   픽셀은 화면 해상도에 상대적인 단위입니다. 그 값은 고정되어 있으며 사용자 설정에 따라 변경되지 않습니다. 예를 들어 요소의 너비를 100픽셀로 설정하면 해당 요소의 너비는 100픽셀로 유지됩니다.

코드 예:

div {
  width: 100px;
  height: 50px;
}

2. 백분율(%):
   백분율은 상위 요소에 상대적인 단위이며 해당 값은 상위 요소의 크기에 따라 변경됩니다. 즉, 백분율 단위는 화면 크기 변화에 따라 요소의 크기를 자동으로 조정할 수 있습니다. 예를 들어, 상위 요소의 너비가 200px이고 하위 요소의 너비를 50%로 설정하면 하위 요소는 상위 요소 너비의 절반을 차지합니다.

코드 예:

.parent {
  width: 200px;
}

.child {
  width: 50%;
  height: 50px;
}

3. em(em):
   em은 요소의 자체 글꼴 크기에 상대적인 단위입니다. 예를 들어 요소의 글꼴 크기가 16px인 경우 1em은 16px, 2em은 32px 등입니다. em 단위는 글꼴 크기의 상대적인 조정을 쉽게 실현할 수 있습니다.

코드 예:

p {
  font-size: 16px;
}

span {
  font-size: 1.5em; /* 相当于24px */
}

4. rem(rem):
   rem은 em과 유사하지만 루트 요소(일반적으로 html 요소를 나타냄)에 상대적인 글꼴 크기입니다. rem 단위는 전체 페이지에서 글꼴 크기를 균일하게 제어하는 ​​동시에 상대적인 조정도 가능하게 합니다.

코드 예:

html {
  font-size: 16px;
}

p {
  font-size: 1.5rem; /* 相当于24px */
}

요약:
CSS의 상대 단위는 픽셀(px), 백분율(%), em(em) 및 rem(rem)입니다. 픽셀 단위는 고정되어 있으며 사용자 설정에 따라 변경되지 않습니다. 백분율 단위는 상위 요소의 크기에 따라 변경됩니다. Em 단위는 요소 자체의 글꼴 크기에 상대적인 단위이고, rem 단위는 루트 요소의 글꼴 크기에 상대적인 단위입니다. 실제 응용 프로그램에서는 필요에 따라 요소 크기와 글꼴 크기를 제어하기 위해 적절한 상대 단위를 선택할 수 있습니다.

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