px, em, rem의 차이점

모두 글꼴 크기와 상자의 너비 및 높이를 설정하는 데 사용되지만 브라우저 크기 변경으로 인해 px는 변경되지 않지만 em과 rem은 변경됩니다. 브라우저 크기로 인해 변경됩니다.

코드를 작성하는 과정에서 CSS에서 글꼴 크기나 요소의 너비와 높이를 정의할 때 크기 단위를 사용하는 경우가 많습니다. 이 글은 CSS에서 흔히 사용되는 크기 단위 이름과 그 사용법을 자세히 소개하며, 참고할 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

【추천 강좌: CSS 튜토리얼】#🎜🎜 #

px

px는 pixel의 약어로, 픽셀을 의미하며, 지정시 폰트를 사용합니다. 크기와 요소의 너비와 높이. 픽셀은 모니터 화면 해상도에 따라 다릅니다.

예: div 요소의 너비를 200px로 설정하고 높이를 200px로 설정합니다

div{
width:200px;
height:200px;
border: 1px solid #ccc;
text-align: center;
line-height: 200px;
font-size: 16px;

		}

효과는 다음과 같습니다. #🎜🎜 #

em

em은 텍스트 글꼴에 상대적인 상대적 길이 단위입니다. 현재 개체 크기 내에서. 현재 텍스트의 글꼴 크기를 설정하지 않으면 em은 브라우저의 기본 글꼴 크기를 기준으로 합니다.

브라우저의 기본 글꼴 크기는 16px, 즉 1em=16px입니다. , 일반적으로 Em 단위는 적응형 레이아웃을 작성할 때 자주 사용됩니다. 페이지의 모든 em이 본문 값을 기준으로 하도록 CSS의 본문 선택기에서 글꼴 크기 값을 설정하여 코드를 단순화합니다.

예: 크기 단위를 em

1em=16px로 변경하여 div 요소의 너비를 100px로, 높이를 100px로 설정하므로 100px=6.25em#🎜 🎜#

<style>
div{
width:6.25em;
height:6.25em;
border: 0.0625em solid #ccc;
text-align: center;
line-height: 6.25em;
}
</style>

Rendering:

값이 본문에 직접적으로 연관되도록 본문에 직접 값을 설정할 수도 있습니다. 그런 다음 원래 px 값을 10으로 나누어 em 값을 얻습니다. em 값은 고정되지 않고 상위 요소

rem의 크기에 상대적임을 알 수 있습니다.

rem은 CSS3에 새로운 상대 단위가 추가되었습니다. 이것과 em의 차이점은 rem을 사용하여 요소의 글꼴 크기를 설정할 때 여전히 상대 크기라는 것입니다. 그러나 이는 HTML 루트 요소에만 관련됩니다. 사용법은 매우 간단합니다. 루트 요소의 크기를 변경하여 값을 변경할 수 있습니다.

예: 크기 단위를 rem으로 변경하여 div 요소의 너비를 100px로, 높이를 100px로 설정합니다. #🎜🎜 #

body{
font-size: 62.5%
	}
div{
width:10em;
height:10em;
border:0.1em solid #ccc;
}
</style>

렌더링:

요약: 위 내용은 이 글의 전체 내용입니다. 모든 사람.

위 내용은 px, em, rem의 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!