CSS의 길이 단위에 대한 자세한 설명

이전 단어

이 글은 CSS의 길이 단위에 대한 주요 지식을 소개하기 위해 절대 길이 단위와 상대 길이 단위로 나누어서 소개합니다

절대 길이 단위

절대 길이 단위는 물리적 측정을 나타냅니다

픽셀 px(픽셀)

웹에서는 픽셀 px가 일반적인 측정 단위이고, 다른 많은 길이 단위는 픽셀에 직접 매핑됩니다. 마지막으로 픽셀 단위로 처리됩니다.

in(인치)

1in = 2.54cm = 96px

cmcm(센티미터)

1cm = 10mm = 96px/2.54 = 37.8px

밀리미터 mm(밀리미터)

1mm = 0.1cm = 3.78px

1/4mm q(¼밀리미터)

1q = 1/4mm = 0.945px

포인트(포인트)

1pt = 1/72in = =0.0139in = 1/72*2.54cm = 1/72*96px = 1.33px

picas(picas)

1pc = 12pt = 1 /6in = 1/6*96px = 16px

글꼴 관련 상대 길이 단위

em, ex, ch, rem은 글꼴 관련 상대 길이 단위

em

em은 요소의 글꼴 크기 속성 자체에 대해 계산된 값을 나타냅니다. 상위 요소의 글꼴 크기를 기준으로 합니다. 다른 속성에 사용되는 경우 자체 요소의 글꼴 크기를 기준으로 합니다.
rem

rem은 다음을 기준으로 계산된 값입니다. 루트 요소의 글꼴 크기 속성 html

호환성: IE8-지원되지 않음

<style>  
.box{font-size: 20px;}  
.in{  
    /* 相对于父元素，所以2*2px=40px */
    font-size: 2em;  
    /* 相对于本身元素，所以5*40px=200px */
    height: 5em;  
    /* 10*40px=400px */
    width: 10em;  
    background-color: lightblue;  
}  
</style>

<p class="box">
    <p class="in">测试文字</p>
</p>

ex

ex는 사용된 글꼴을 의미합니다. 소문자 x의 높이입니다. 그러나 x의 높이는 글꼴마다 다를 수 있습니다. 실제로 많은 브라우저에서는 em 값의 절반을 ex 값으로 사용합니다

[참고] ex는 실제로 미세 조정을 위해 자주 사용됩니다

<style>  
/* 浏览器默认字体大小为16px，则2*16=32px，所以根元素字体大小为32px */
html{font-size: 2rem;}  
/* 2*32=64px */
.box{font-size: 2rem;}  
.in{  
    /* 1*32=32px */
    font-size: 1rem;  
    /* 1*32=32px */
    border-left: 1rem solid black;  
    /* 4*32=128px */
    height: 4rem;  
    /* 6*32=192px */
    width: 6rem;  
    background-color: lightblue;  
}  
</style>

<p class="box">
    <p class="in" id="test">测试文字</p>
</p>

<style>  
.box{font-size: 20px;}  
.in{  
    font-size: 1ex;  
    border-left: 1ex solid black;  
    height: 10ex;  
    width: 20ex;  
    background-color: lightblue;  
}  
</style>

ch

ch는 ex와 유사하며 숫자 0의 너비로 정의됩니다. 숫자 0의 너비를 판별할 수 없는 경우 em 값의 절반이 ch 값으로 사용됩니다.

호환성: IE8-지원되지 않음

[참고]ch는 주로 점자 조판에 사용됩니다. 실제로

宋体微软雅黑arialserif
<p class="box">
    <p class="in" id="test">测试文字</p>
</p>

<script>  
var aBtns = document.getElementsByTagName(&#39;button&#39;);  
for(var i = 0; i < aBtns.length; i++ ){  
    aBtns[i].onclick = function(){  
        test.style.fontFamily = this.innerHTML;  
    }  
}      
</script>

<style>  
.box{font-size: 20px;}  
.in{  
    font-size: 1ch;  
    border-left: 1ch solid black;  
    height: 10ch;  
    width: 20ch;  
    background-color: lightblue;  
}  
</style>

뷰포트 관련 상대 길이 단위

초기 포함 블록의 크기를 기준으로 한 뷰포트 관련 길이 값입니다. 초기 포함 블록의 너비와 높이가 변경되면 그에 따라 크기가 조정됩니다. 그러나 루트 요소의 오버플로 값이 auto인 경우 스크롤 막대는 존재하지 않는 것으로 간주됩니다.

뷰포트 관련 유닛은 vh, vw, vmin, vmax 4가지 유닛이 있습니다

호환성: IE8-지원 안함, IOS7.1-지원 안함, android4.3- 지원되지 않음(vmax의 경우 모든 IE 브라우저에서 지원되지 않음) [참고] 컨텐츠가 html에 추가된 경우 Blackberry는 시각적 뷰포트를 기준으로 잘못 계산하고 Safari는 html 요소를 기준으로 이상하게 계산합니다. , 이 두 단위도 변경됩니다.

vh

레이아웃 뷰포트 높이의 1/100

vw

레이아웃 뷰포트 너비의 1/100

宋体微软雅黑arialserif
<p class="box">
    <p class="in" id="test">测试文字</p>
</p>

rrree

vmin

레이아웃 뷰포트 높이와 너비 사이 최소값의 1/100

<script>  
var aBtns = document.getElementsByTagName(&#39;button&#39;);  
for(var i = 0; i < aBtns.length; i++ ){  
    aBtns[i].onclick = function(){  
        test.style.fontFamily = this.innerHTML;  
    }  
}      
</script>

vmax

레이아웃 뷰포트 높이와 너비 사이 최대값의 1/100

<style>  
body{margin: 0;}  
.box{  
    /* 实现与屏幕等高的效果 */
    height: 100vh;  
    background-color: lightblue;  
}      
</style>

위 내용은 편집자가 제공한 CSS의 길이 단위에 대한 진부한 표현입니다. PHP 중국어 웹사이트를 지원해 주시기 바랍니다.

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