Detaillierte Beschreibung der Längeneinheiten in CSS

Die vorherigen Wörter

Dieser Artikel ist in absolute Längeneinheiten und relative Längeneinheiten unterteilt, um das Hauptwissen über Längeneinheiten in CSS einzuführen

Absolute Längeneinheit

Absolute Längeneinheit stellt eine physikalische Messung dar

Pixel px (Pixel)

Im Web ist das Pixel px eine typische Maßeinheit, und viele andere Längeneinheiten werden direkt auf Pixel abgebildet. Abschließend werden sie in Pixel

in(Zoll)

1in = 2,54cm = 96px

cmcm(Zentimeter)
1cm = 10mm = 96px/2,54 = 37,8px

Millimetermm(Millimeter)
1mm = 0,1cm = 3,78px

1/4mm q (Viertelmillimeter)

1q = 1/4mm = 0,945px

Punkte (Punkte)
1pt = 1 /72in = =0,0139in = 1/72*2,54cm = 1/72*96px = 1,33px

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

Schriftbezogene relative Längeneinheiten

em, ex, ch, rem sind schriftartbezogene relative Längeneinheiten

em
em stellt den berechneten Wert des Schriftgrößenattributs des Elements dar. Wenn es für das Schriftgrößenattribut selbst verwendet wird, relativ Relativ zur Schriftgröße des übergeordneten Elements; bei Verwendung für andere Attribute relativ zur Schriftgröße des eigenen Elements

<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>

rem
rem ist der berechnete Wert relativ zum Schriftgrößenattribut des Stammelements HTML

Kompatibilität: IE8-nicht unterstützt

<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>

ex
ex bezieht sich auf die Höhe des Kleinbuchstabens x in der verwendeten Schriftart. Die Höhe von x kann jedoch für verschiedene Schriftarten unterschiedlich sein. Tatsächlich verwenden viele Browser die Hälfte des em-Werts als ex-Wert

[Hinweis] ex wird in der Praxis häufig zur Feinabstimmung verwendet

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

宋体微软雅黑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>

ch
ch ähnelt ex und ist als Breite der Zahl 0 definiert. Wenn die Breite der Zahl 0 nicht bestimmt werden kann, wird die Hälfte des em-Werts als ch-Wert verwendet

Kompatibilität: IE8 – nicht unterstützt

[Hinweis]ch wird hauptsächlich für den Braille-Schriftsatz verwendet in der Praxis

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

宋体微软雅黑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>

Relative relative Länge des Ansichtsfensters Einheiten

Ansichtsfensterbezogene Längenwerte relativ zur Größe des anfänglichen enthaltenden Blocks. Wenn sich Breite und Höhe des anfänglichen enthaltenden Blocks ändern, werden sie entsprechend skaliert. Wenn der Überlaufwert des Stammelements jedoch „auto“ lautet, wird davon ausgegangen, dass keine Bildlaufleisten vorhanden sind.

Bezüglich der Viewport-bezogenen Einheiten gibt es vier Einheiten: vh, vw, vmin und vmax

Kompatibilität: IE8 – nicht unterstützt, IOS7.1 – nicht unterstützt, Android4.3 – nicht unterstützt (Für vmax nicht von allen IE-Browsern unterstützt)

[Hinweis] Blackberry berechnet es falsch relativ zum visuellen Ansichtsfenster und Safari berechnet es seltsamerweise relativ zum HTML-Element, wenn Inhalt zum HTML hinzugefügt wird , diese beiden Einheiten ändern auch

vh
1/100 der Höhe des Layout-Ansichtsfensters

vw
1/100 der Breite des Layout-Ansichtsfensters

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

<p class="box"></p>

vmin
1/100 des Mindestwerts zwischen Höhe und Breite des Layout-Ansichtsfensters

/*类似于contain效果*/
.box{  
    height: 100vmin;  
    width: 100vmin;  
}

vmax

1/100stel des Maximalwerts zwischen Höhe und Breite des Layout-Ansichtsfensters

/*类似于cover效果*/
.box{  
    height: 100vmax;  
    width: 100vmax;  
}

Das Obige ist die klischeehafte Längeneinheit in CSS, die Ihnen der Herausgeber zur Verfügung gestellt hat. Ich hoffe, Sie unterstützen die chinesische PHP-Website

Das obige ist der detaillierte Inhalt vonDetaillierte Beschreibung der Längeneinheiten in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!