Heim > Artikel > Web-Frontend > 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
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ängeneinheitenem
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
<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
<style> .box{font-size: 20px;} .in{ font-size: 1ex; border-left: 1ex solid black; height: 10ex; width: 20ex; background-color: lightblue; } </style>
<p class="box"> <p class="in" id="test">测试文字</p> </p>
<script> var aBtns = document.getElementsByTagName('button'); 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
<style> .box{font-size: 20px;} .in{ font-size: 1ch; border-left: 1ch solid black; height: 10ch; width: 20ch; background-color: lightblue; } </style>
<p class="box"> <p class="in" id="test">测试文字</p> </p>
<script> var aBtns = document.getElementsByTagName('button'); 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 auchvh
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!