Autor: Chinaxiang Quelle: Internet 2015-12-01 23:36
Es gibt viele Längeneinheiten in CSS, daher halte ich es für notwendig, Notizen zu organisieren.
Es gibt viele Längeneinheiten in CSS, daher halte ich es für notwendig, ein Memo zu organisieren.
Es gibt auch viele und vollständige Einführungen online, Einzelheiten finden Sie in den Referenzmaterialien.
Einheiten werden im Allgemeinen in zwei Kategorien unterteilt:
Absolute Einheiten, die sich aufgrund von Größenänderungen anderer Elemente nicht ändern.
Relative Einheit hat keinen festen Messwert, sondern einen relativen Wert, der durch die Größe anderer Elemente bestimmt wird.
| Einheit | Typ | Einführung |
|---|---|---|
px |
Absolut | Pixel (ein Punkt auf dem Computerbildschirm), 1px = 1/96in
|
pt |
Absolut | Punkte, 1pt = 1/72in
|
pc |
Absolut | Picas, 1pc = 12pt
|
in |
Absolut | Zoll, 1in = 96px = 2.54cm
|
cm |
Absolut | Zentimeter, 1cm = 96/2.54px
|
mm |
Absolut | Millimeter, 1mm = 1/10cm
|
q |
Absolut | Viertelmillimeter, 1q = 1/4mm
|
% |
Relativ | Die Breite oder Schriftgröße relativ zum übergeordneten Element |
em | Relativ | Die Schriftgröße relativ zum übergeordneten Element |
rem |
Relative | (d. h. Root-EM) Schriftgröße relativ zum HTML-Tag |
ex |
Relativ | Höhe von x Buchstaben in der aktuellen Schriftumgebung |
ch |
Relativ | Die Höhe von 0 Zahlen in der aktuellen Schriftartenumgebung |
vw |
Relativ | 1 % des Ansichtsfensters (vom Browser sichtbarer Bereich). ) Breite |
vh |
Relativ | 1% Höhe des Ansichtsfensters (sichtbarer Bereich des Browsers) |
vmin |
Relativ | 1 % Der kleinere Wert aus Breite und Höhe des Ansichtsfensters (sichtbarer Bereich des Browsers) |
vmax |
Relativ | 1 % Der größere Wert aus Breite und Höhe des Ansichtsfensters (sichtbarer Bereich des Browsers) |
Da die absolute Einheit ein fester Wert ist, gibt es nichts einzuführen. Im Folgenden wird hauptsächlich die relative Einheit vorgestellt.
%Die Größe desselben Attributs relativ zum übergeordneten Element. Dabei handelt es sich eigentlich nicht um eine Einheit, kann aber doch als Längeneinheit verwendet werden und wird daher hier aufgeführt.
Wenn Sie die Schriftart festlegen, ist sie relativ zur Schriftgröße des übergeordneten Elements.
Die Standardschriftgröße in den Tags <html> und <body> ist in den meisten Browsern 100%.
html {font-size: 100%;}body {font-size: 100%;}100 % = 1em = 16px = 12pt
Bei Verwendung zum Festlegen von nicht zur Schriftart gehörenden Abmessungen wie Breite und Höhe basiert der Längenwert in Prozent auf dem Längenwert des übergeordneten Elements mit demselben Attribut.
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>JS Bin</title>
<style type="text/css">
p.parent { margin:150px; width: 200px; height: 200px; border: 1px solid blue; }
p.child { width: 50%; height: 50%; border: 1px dashed black; }
</style></head><body>
<p class="parent">
<p class="child"></p>
</p></body></html>再啰嗦一点关于父元素的问题：何为父元素，相对定位（relative），绝对定位（absolute），浮动（float），固定（fixed）中如何找寻父元素？
由于HTML是树形结构，标签套标签，一般情况下的父子关系很明朗。
<p class="parent">
<p class="child"></p>
</p>相对定位元素，它的父元素符合标签嵌套。
绝对定位元素，它的父元素是离它最近的定位元素（绝对定位，相对定位，固定，但不包括浮动）或者视窗尺寸（没找到定位元素时）。
浮动元素，它的父元素也符合标签嵌套。
固定元素（特殊的绝对定位），它的父元素是视窗（浏览器默认用来展示内容的区域的尺寸，不是html 或body 的尺寸）。
注意一下绝对定位就行了，其他的相对简单。
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>JS Bin</title>
<style type="text/css">
html { width:1000px; }
body { width:800px; }
#box { width:50%; height:300px; position: absolute; margin-left: 200px; border: 1px solid red; }
#can { position:absolute; top:100px; left:100px; width:50%; height:50%; border:1px solid black; }
</style> </head> <body>
<p id="box">
<p id="can"></p>
</p>
</body> </html>box 宽度为视窗的一半，can 的宽高是 box 的宽高的一半。
将 can 设置为 position:
fixed; 则其父元素将不再是 box 而是浏览器视窗。
can 的宽高是视窗宽高的一半。
浮动元素的父元素跟普通元素的父元素是一样的。
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>JS Bin</title>
<style type="text/css">
html { width:1000px; }
body { width:800px; }
#box { width:50%; height:300px; position: absolute; margin-left: 200px; border: 1px solid red; }
#can { float:left; width:50%; height:50%; border:1px solid black; }
</style> </head> <body>
<p id="box">
<p id="can"></p>
</p>
</body> </html>注意： padding、 margin 如果设置了百分比，上，下，左，右
用的都是父元素宽度 的值为标准去计算。
em 和 rem两者都是基于字体尺寸的，区别在于 em 是相对于当前父元素的字体大小为标准，而 rem 是相对于 html 元素的字体大小为标准。
举个例子你就明白了。
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>JS Bin</title>
<style type="text/css">
html { font-size: 30px; }
body { font-size: 14px; }
p.em { font-size: 1.2em; }
p.rem { font-size: 1.2rem; }
</style></head><body>
<p class="em">
Test <!-- 14 * 1.2 = 16.8px -->
<p class="em">
Test <!-- 16.8 * 1.2 = 20.16px -->
<p class="em">
Test <!-- 20.16 * 1.2 = 24.192px -->
</p>
</p>
</p>
<p class="rem">
Test <!-- 30 * 1.2 = 36px -->
<p class="rem">
Test <!-- 30 * 1.2 = 36px -->
<p class="rem">
Test <!-- 30 * 1.2 = 36px -->
</p>
</p>
</p></body></html>
ex und chex und ch Einheiten hängen von der aktuellen Schriftart font-family und Schriftgröße font-size ab. ex bezieht sich auf die Höhe von Kleinbuchstaben x in der aktuellen Schriftartenumgebung und ch bezieht sich auf die Breite von Zahlen 0 in der aktuellen Schriftartenumgebung.
IE9+ und moderne Browser werden bereits unterstützt.
vw und vh Responsive Webdesign-Techniken basieren stark auf Proportionsregeln. Allerdings ist die CSS-Skalierung nicht immer die beste Lösung für jedes Problem. Was ist, wenn Sie die Breite oder Höhe des Anzeigefensters anstelle der Breite des übergeordneten Elements verwenden möchten? Genau das bieten die Einheiten vh und vw.
vh entspricht der Höhe des Ansichtsfensters 1/100. Wenn die Höhe des Browsers beispielsweise 900px ist, ist der durch 1vh erhaltene Wert 9px. Wenn die Anzeigefensterbreite 750px ist, ist der durch 1vw erhaltene Wert ebenfalls 7.5px.
Beide Geräte werden in IE10+ und modernen Browsern unterstützt.
vmin 和 vmax这两个单位是针对vw和vh
vmin 是vw和vh中比较 小 的值
vmax 是vw和vh中比较 大 的值
.box { height: 100vmin; width: 100vmin;}.box { height: 100vmax; width: 100vmax;}IE10+ 和现代浏览器都已经支持 vmin
webkit浏览器之前不支持vmax，现在已经支持，所有现代浏览器已经支持，但是IE不支持 vmax.
尺寸单位虽然说不是很难的内容，但能够做到精准理解和熟练使用也是极其难得的，也许随着CSS的发展会有更多有用的单位引进。
对单位斤斤计较是一个优秀CSS使用者应该具备的品质，赶紧去挑选合适的单位去开发你的NB产品吧。
下面的代码用来检测您的浏览器是否支持常用单位：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style type="text/css">
body {
padding: 20px;
}
div {
background: #99ff99;
padding: 5px;
margin-bottom: 10px;
white-space: nowrap;
width: 0;
}
div:after {
content: " (supported)";
}
div.fail {
width: 100% !important;
background: #ff6666 !important;
}
div.fail:after {
content: " (NOT supported)";
}
</style>
</head>
<body>
<div id="percentage">50% - percentage</div>
<div id="pixel">400px - pixels (device pixels)</div>
<div id="em">20em - relative unit</div>
<div id="rem">20rem - root em</div>
<div id="vw">15vw - viewport width</div>
<div id="vh">60vh - viewport height</div>
<div id="vmin">60vmin - smaller of vw or vh</div>
<div id="vmax">60vmax - larger of vw or vh</div>
<div id="inch">4in - inches</div>
<div id="cm">20cm - centimeters</div>
<div id="mm">200mm - millimeters</div>
<div id="pt">120pt - points</div>
<div id="pc">40pc - picas</div>
<div id="ex">60ex - x-height</div>
<div id="ch">60ch - based on width of zero (0) character</div>
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
<script>
// 给指定元素设置宽度
var percentage = $("#percentage").css("width", "50%");
// 如果宽度值为0,即不支持，为此元素添加fail类
if (percentage.width() == 0) percentage.addClass("fail");
var pixel = $("#pixel").css("width", "400px");
if (pixel.width() == 0) pixel.addClass("fail");
var em = $("#em").css("width", "20em");
if (em.width() == 0) em.addClass("fail");
var rem = $("#rem").css("width", "20rem");
if (rem.width() == 0) rem.addClass("fail");
var vw = $("#vw").css("width", "15vw");
if (vw.width() == 0) vw.addClass("fail");
var vh = $("#vh").css("width", "60vh");
if (vh.width() == 0) vh.addClass("fail");
var vmin = $("#vmin").css("width", "60vmin");
if (vmin.width() == 0) vmin.addClass("fail");
var vmax = $("#vmax").css("width", "60vmax");
if (vmax.width() == 0) vmax.addClass("fail");
var inch = $("#inch").css("width", "4in");
if (inch.width() == 0) inch.addClass("fail");
var cm = $("#cm").css("width", "20cm");
if (cm.width() == 0) cm.addClass("fail");
var mm = $("#mm").css("width", "200mm");
if (mm.width() == 0) mm.addClass("fail");
var pt = $("#pt").css("width", "120pt");
if (pt.width() == 0) pt.addClass("fail");
var pc = $("#pc").css("width", "40pc");
if (pc.width() == 0) pc.addClass("fail");
var ex = $("#ex").css("width", "60ex");
if (ex.width() == 0) ex.addClass("fail");
var ch = $("#ch").css("width", "60ch");
if (ch.width() == 0) ch.addClass("fail");
</script>
</body>
</html>Das obige ist der detaillierte Inhalt vonBeispielanalyse der Längeneinheits- und Breitenanpassung in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
