CSS에서 em은 무엇을 의미하나요?
- 青灯夜游원래의
- 2021-04-02 15:17:1019403검색
em은 현재 개체 내 텍스트의 글꼴 크기를 기준으로 하는 CSS의 상대 길이 단위입니다. 인라인 텍스트의 현재 글꼴 크기가 수동으로 설정되지 않은 경우 브라우저의 기본 글꼴 크기를 기준으로 합니다. 너비, 높이, 줄 높이, 여백, 테두리 및 기타 스타일을 설정하는 데 사용할 수 있습니다.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
CSS에는 많은 단위가 있습니다. 일반적으로 사용되는 px는 절대 단위이고 em은 상대 단위입니다. 반응성과 모바일 단말을 전제로, em을 사용하면 웹 문서와 HTML 요소의 글꼴 크기, 너비, 여백, 테두리 등 일련의 속성을 한 번에 더 편리하고 빠르게 조정할 수 있다고 할 수 있습니다. em을 단위로 사용하는 것은 px보다 더 유연합니다.
1. 엠이란 무엇인가요? 너비, 높이, 줄 높이, 여백, 패딩, 테두리 및 기타 스타일을 설정하는 데 사용할 수 있습니다. 1em=元素中文本的1个垂直高度
위 규칙에 따르면 요소의 텍스트 크기가 16px이면 1em=16px이고, 요소의 텍스트 크기가 20px이면 1em=20px...
2 .em 및 HTML 텍스트 크기의 기본값
브라우저의 텍스트는 일반적으로 기본적으로 16px, 즉 기본적으로 다음과 같습니다.
1em=16px
이 설정을 변경하는 방법은 무엇입니까? 본문 요소의 글꼴 크기를 명시적으로 설정하면 됩니다. 예:
body {
font-size: 24px;
width: 10em; /* 10em = 24px * 10 = 240px */
}
3.em 및 상속
CSS에서 요소가 글꼴 크기를 설정하지 않으면 해당 글꼴 크기 값은 상위 요소의 글꼴 크기 값입니다. 이는 이해하기 쉽습니다. 그것은 단지 단순한 상속일 뿐입니다. 예:<style>
body {
font-size: 12px;
}
div {
/* 该元素没有设置font-size，因此继承了父元素的font-size: 12px; */
width: 10em; /* 10em = 12px * 10 = 120px */
}
</style>
<body>
<div></div>
</body>하위 요소 p는 상위 요소 본문의 글꼴 크기를 상속하므로 실제로 "글꼴 크기: 12px;"라는 문장이 p의 스타일 시트에 암시되어 있습니다. 이제 하위 요소에 대해 글꼴 크기를 명시적으로 설정하면 하위 요소는 자체 글꼴 크기에 따라 em의 절대 길이를 계산합니다. 예:<style>
body {
font-size: 12px;
}
div {
font-size: 20px;
width: 10em; /* 10em = 20px * 10 = 200px */
}
</style>
<body>
<div></div>
</body>위의 예에서 p의 글꼴 크기는 px 단위를 사용하므로 em을 사용하려면 어떻게 해야 할까요? 글꼴 크기를 설정할 때 em을 단위로 사용하는 경우 em은 상위 요소의 글꼴 크기에 대한 상대 값이 됩니다. 예:<style>
body {
font-size: 12px;
}
div {
font-size: 2em; /* 2em = 12px * 2 = 24px */
width: 10em; /* 10em = 24px * 10 = 240px */
}
</style>
<body>
<div></div>
</body>하위 요소 p의 글꼴 크기는 상위 요소 본문의 글꼴 크기에 따라 결정됩니다. 따라서 2em = 12px * 2, = 24px이고 p의 너비는 자체 글꼴을 기준으로 결정됩니다. -크기, 따라서 10em = (12px * 2) * 10 = 240px입니다. 따라서 p에서 2em=24px 및 10em=240px인 것은 놀라운 일이 아닙니다.
실제로 너비뿐만 아니라 하위 요소의 글꼴 크기도 상위 요소의 글꼴 크기에 따라 결정되며 다른 모든 em은 자체 글꼴 크기에 따라 결정됩니다. <style>
body {
font-size: 16px;
}
div {
font-size: 1.25em; /* 1.25em = 16px * 1.25 = 20px */
width: 10em; /* 10em = 20px * 10 = 200px */
height: 5em; /* 5em = 20px * 5 = 100px */
border: 0.05em solid #000; /* 0.05em = 20px * 0.05 = 1px */
margin: 0.25em; /* 0.25em = 20px * 0.25 = 5px */
padding: 0.75em; /* 0.75em = 20px * 0.75 = 15px */
line-height: 1.5em; /* 1.5em = 20px * 1.5 = 30px */
}
</style>
<body>
<div></div>
</body> (동영상 공유 학습: css 동영상 튜토리얼
)2. px
온라인 도구 PXtoEM(http:/ /pxtoem.com/)에서는 px를 기준으로 필요한 em 값을 쉽고 빠르게 계산할 수 있습니다.
2. em을 수동으로 계산합니다
px를 em으로 변환하는 계산 공식은 다음 예에서 역으로 추론할 수 있습니다.
<style>
div {
font-size: 16px;
width: 2em; /* 2em = 16px * 2 = 32px */
}
</style>
px = 참조 텍스트 크기 * em =>
3. Notes
위 수식에서 "참조 텍스트 크기"에 특별한 주의가 필요합니다.
요소 자체에서 글꼴 크기를 설정하지 않은 경우 참조 텍스트 크기는 상위 요소의 글꼴 크기입니다.
- 요소에 대해 글꼴 크기를 설정할 때 em이 단위인 경우 참조 텍스트 크기는 상위 요소의 글꼴 크기입니다. -size
-
더 많은 프로그래밍 관련 지식을 보려면
프로그래밍 비디오 를 방문하세요. !
위 내용은 CSS에서 em은 무엇을 의미하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：CSS 초기화란 무엇입니까?다음 기사：CSS 초기화란 무엇입니까?