웹 프론트엔드 HTML 튜토리얼 HTML로 길이를 표현하는 방법은 무엇입니까? HTML의 몇 가지 일반적인 길이 표현 방법

HTML로 길이를 표현하는 방법은 무엇입니까? HTML의 몇 가지 일반적인 길이 표현 방법

Oct 10, 2018 pm 05:42 PM


html로 길이를 어떻게 표현하나요? HTML의 일반적인 길이 표현 방법은 무엇입니까? 이 기사는 HTML 중간 길이 방법에 대한 내용을 제공합니다. 이것이 여러분에게 도움이 되기를 바랍니다.

다음은 웹 페이지의 일반적인 html 단위에 대한 pCSS5 소개와 CSS+p 레이아웃의 길이 단위에 대한 소개를 요약한 것입니다.

사실 CSS에는 8개의 길이 단위가 있습니다. 즉, px, em, pt, ex, pc, in, mm, cm #

px # 🎜🎜#: 픽셀은 장치의 길이 단위를 기준으로 하며, 픽셀은 모니터 화면 해상도를 기준으로 합니다. 예를 들어 WINDOWS 사용자가 사용하는 해상도는 일반적으로 96픽셀/인치입니다. MAC 사용자가 사용하는 해상도는 일반적으로 72픽셀/인치입니다.
em: 상대 길이 단위. 현재 개체 내의 텍스트를 기준으로 한 글꼴 크기입니다. 현재 인라인 텍스트의 글꼴 크기가 수동으로 설정되지 않은 경우 브라우저의 기본 글꼴 크기를 기준으로 합니다.
ex: 상대 길이 단위. 문자 "x"를 기준으로 한 높이입니다. 이 높이는 일반적으로 글꼴 크기의 절반입니다. 인라인 텍스트의 현재 글꼴 크기가 수동으로 설정되지 않은 경우 브라우저의 기본 글꼴 크기를 기준으로 합니다.
pt: 포인트, 절대 길이 단위.
pc: 피카(Pica), 절대 길이 단위. 우리나라 신형 4호형 크기와 맞먹습니다.
in: 인치, 길이의 절대 단위입니다.
mm: 밀리미터, 길이의 절대 단위.
cm: 센티미터, 길이의 절대 단위입니다.

그 중: 1in = 2.54cm = 25.4mm = 72pt = 6pc;

우리는 흔히 px를 용기의 크기 단위로 사용하는데, 다들 이의가 없습니다. 글꼴 크기(font-size) 중국의 많은 사람들이 px를 단위로 사용합니다. 실제로 px를 글꼴 단위로 사용할 때의 유일한 치명적인 단점은 IE에서 브라우저 글꼴 크기 조정 기능을 사용할 수 없다는 것입니다. 또는 Ctrl 키를 누른 채 마우스 가운데 휠을 스크롤합니다.

너무 많은 사람들이 html em 단위를 사용하는 것을 제안합니다. px를 사용하는 데 익숙한 사람들에게는 확실히 그리 편리하지 않습니다. 다음은 참고할 수 있는 몇 가지 변환 공식과 비교표입니다. 🎜 #px에서 em으로:예: 12px / 16px = .75em

px에서 %:예: 12px / 16px * 100 = 75%

px에서 pt:예: 16px * 72 (72 포인트 = 1 인치) / 96(Windows의 경우 인치당 96픽셀, Mac의 경우 72픽셀) = 12pt

em에서 px:예: .75em * 16px = 12px
em에서 %:예: .75em * 100 = 75 %
% - px:예: 75 * 16px / 100 = 12px




Pixels

EMs#🎜 🎜#퍼센트6px0.375em#🎜 🎜#9px0.563em56.3% 10px# 🎜🎜#0.625em62.5%8pt#🎜 🎜# 68.8%#🎜 🎜# 12px9pt13px0.813em#🎜 🎜 ##🎜 🎜# 14px0.875em15px# 🎜🎜 #0.938em93.8%# 🎜🎜## 🎜🎜 #1em100%106.3%#🎜 🎜#13pt# 🎜🎜#18px1.125em#🎜 🎜##🎜 🎜#112.5%14pt# 🎜🎜## 🎜🎜#19px1.188em# 🎜🎜## 🎜🎜#125%#🎜 🎜# 15pt#🎜 🎜## 🎜🎜#21px1.313em131.3%# 🎜🎜#22px 1.375em137.5%17pt #🎜🎜 #23px# 🎜🎜# 1.438em143.8%17pt# 🎜🎜# 1.5em150%18pt#🎜 🎜 #last pCSS5PX pixel을 사용하여 웹페이지를 단위로 배치합니다. 위는 html로 길이를 표현하는 방법이죠? HTML의 몇 가지 일반적인 길이 표현 방법에 대한 전체 소개입니다. HTML 튜토리얼에 대해 더 알고 싶으시면 PHP 중국어 웹사이트에 주목하세요.
포인트# 🎜 🎜# # 🎜🎜 #37.5%#######5pt############7px#🎜🎜 ####0.438em#####43.8%# ㅋㅋㅋ # 🎜🎜#6pt
#🎜 🎜#7pt
11px#🎜 🎜## 🎜🎜#0.688em
8pt# 🎜🎜#0.75em 75%
#🎜🎜 # 81.3% 10pt
# 🎜🎜 #87.5% 11pt
11pt 16px
#🎜 🎜#12pt 17px 1.063em# 🎜 🎜#
#🎜 🎜#118.8% 14pt20px 1.25em
# 🎜🎜# 16pt
# 🎜🎜 # 24px
recommended#🎜 🎜#
저는 개인적으로 IE에서 글꼴 단위로 px를 사용하고 브라우저 글꼴 크기 조정 기능을 사용할 수 없는 단점이 더 이상 존재하지 않는다고 생각하는 것이 매우 중요합니다. IE7과 IE8의 새 버전에서는 이미 CSS 글꼴 크기를 조정하는 대신 기본적으로 전체 웹 페이지를 확대하는 Firefox를 포함하여 전체 웹 페이지의 확대/축소 기능을 지원하고 있기 때문입니다. 더 많은 관련 튜토리얼을 보려면 다음을 방문하세요: http://www.php.cn/course/list/11.html # 🎜 🎜#

위 내용은 HTML로 길이를 표현하는 방법은 무엇입니까? HTML의 몇 가지 일반적인 길이 표현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

& lt; Progress & Gt의 목적은 무엇입니까? 요소? & lt; Progress & Gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:34 PM

이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우

& lt; datalist & gt의 목적은 무엇입니까? 요소? & lt; datalist & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:33 PM

이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159

& lt; meter & gt의 목적은 무엇입니까? 요소? & lt; meter & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:35 PM

이 기사는 HTML & lt; meter & gt에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex

HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? Mar 17, 2025 pm 12:20 PM

기사는 HTML5 크로스 브라우저 호환성을 보장하기위한 모범 사례에 대해 논의하고 기능 감지, 점진적 향상 및 테스트 방법에 중점을 둡니다.

html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소? html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소? Mar 12, 2025 pm 04:05 PM

이 기사는 html5 & lt; time & gt; 시맨틱 날짜/시간 표현 요소. 인간이 읽을 수있는 텍스트와 함께 기계 가독성 (ISO 8601 형식)에 대한 DateTime 속성의 중요성을 강조하여 Accessibilit를 향상시킵니다.

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? Mar 17, 2025 pm 12:27 PM

이 기사에서는 브라우저에서 직접 사용자 입력을 검증하기 위해 필요한, Pattern, Min, Max 및 Length 한계와 같은 HTML5 양식 검증 속성을 사용하는 것에 대해 설명합니다.

뷰포트 메타 태그는 무엇입니까? 반응 형 디자인에 중요한 이유는 무엇입니까? 뷰포트 메타 태그는 무엇입니까? 반응 형 디자인에 중요한 이유는 무엇입니까? Mar 20, 2025 pm 05:56 PM

이 기사는 모바일 장치의 반응 형 웹 디자인에 필수적인 Viewport Meta Tag에 대해 설명합니다. 적절한 사용이 최적의 컨텐츠 스케일링 및 사용자 상호 작용을 보장하는 방법을 설명하는 반면, 오용은 설계 및 접근성 문제로 이어질 수 있습니다.

& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까? & lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까? Mar 20, 2025 pm 06:05 PM

이 기사는 & lt; iframe & gt; 외부 컨텐츠를 웹 페이지, 공통 용도, 보안 위험 및 객체 태그 및 API와 같은 대안을 포함시키는 태그의 목적.

See all articles