CSS 單位
CSS 單位
若您想讓某個(gè) HTML 元素在指定窗口顯示出您所期望的樣子，那么需要您為它設(shè)置 CSS 屬性并為該屬性指定一個(gè)具體的數(shù)值和單位，例如 ?width? 屬性，?font-size? 屬性。
CSS 中定義了兩種長(zhǎng)度單位類型：
- 絕對(duì)單位（ absolute ）
- 相對(duì)單位（ relative ）
以下代碼在屬性中設(shè)置測(cè)量單位：
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {
background: grey;
color:white;
width: 5cm;
font-size: 20pt;
}
</style>
</head>
<body>
<p>this is a test.</p>
</body>
</html>要指定長(zhǎng)度，請(qǐng)將數(shù)字和單位標(biāo)識(shí)符連接在一起。
在上面的代碼中，width 屬性為 5cm 。 font-size （字體大小）屬性為 20pt 。
絕對(duì)長(zhǎng)度
這些單位是現(xiàn)實(shí)世界的測(cè)量單位。比如千米、米、厘米、毫米這樣固定的單位就被稱為絕對(duì)單位。
CSS 支持五種類型的絕對(duì)單位。
| 單位標(biāo)識(shí)符 | 描述 |
|---|---|
| in | 英寸 |
| cm | 厘米 |
| mm | 毫米 |
| pt | 點(diǎn)或磅 (1 點(diǎn) = 1/72 英寸) |
| pc | 12點(diǎn)活字 (1 pc = 12 pt) |
您可以在樣式中混合和匹配單位，也可以混合絕對(duì)和相對(duì)單位。
您可以混合和匹配單位。
<!DOCTYPE HTML>
<html>
<head>
<style>
p {
width: 5cm;
font-size: 20pt;
}
</style>
</head>
<body>
<p>I like <span>HTML</span> and CSS. www.o2fo.com</p>
</body>
</html>注：
- 絕對(duì)單位在網(wǎng)頁(yè)中很少使用，但在一些特殊場(chǎng)合使用絕對(duì)單位來解決問題還是很有必要的。
相對(duì)長(zhǎng)度
相對(duì)單位會(huì)根據(jù)一個(gè)不固定的參照值來測(cè)量決定顯示結(jié)果。比如：
可以看到相對(duì)單位 ?%? 根據(jù)父元素（藍(lán)綠色框框）的寬決定了子元素的顯示結(jié)果。而相對(duì)單位 ?px? 保持不變。
CSS 定義了大范圍的相對(duì)測(cè)量。
下表顯示了 CSS 在主流瀏覽器中定義和支持的相對(duì)單位。
| 單位標(biāo)識(shí)符 | 描述 |
|---|---|
| em | 相對(duì)于元素的字體大小 |
| ex | 相對(duì)于元素字體的“x-height” |
| rem | 相對(duì)于根元素的字體大小 |
| px | 許多 CSS 像素(假定在 96dpi 顯示器上) |
| % | 另一個(gè)屬性的值的百分比 |
在以下示例中，height 屬性的值為 ?2em?。 ?2em? 意味著?p?元素的高度是字體大小的兩倍。
<!DOCTYPE HTML>
<html>
<head>
<style>
p {
font-size: 15pt;
height: 2em;
}
</style>
</head>
<body>
<a href="http://www.o2fo.com">Visit the website</a>
<p>I like <span>HTML</span> and CSS.</p>
<p style="font-size:12pt">Font size 12pt.</p>
</body>
</html>
例子
以下代碼顯示如何比較英寸和像素中的高度設(shè)置。
<html>
<head>
<title>Pixels to Inches</title>
<style type="text/css">
div {
background: #000;
border: 1px solid rgb(128, 128, 128);
color: white;
font: 9px monospace;
margin: 15px;
text-align: center;
}
div#inches {
width: 1in;
height: 1in;
}
div#pixels {
width: 96px;
height: 96px;
}
</style>
</head>
<body>
<div id="inches"><-- 1 Inch --></div>
<div id="pixels"><-- 96 Pixels --></div>
</body>
</html>
像素值
一個(gè)容易設(shè)置的長(zhǎng)度是使用像素值。1 像素是 1/96 英寸。以下代碼設(shè)置字體大小和寬度的像素值。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {
background: grey;
color:white;
font-size: 20px;
width: 200px;
}
</style>
</head>
<body>
<a href="http://www.o2fo.com">Visit the website</a>
<p>I like <span>HTML</span> and CSS.</p>
</body>
</html>
百分比值
您可以將度量單位表示為另一個(gè)屬性值的百分比。您可以使用 ％（百分比）單位。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {
background: grey;
color:white;
font-size: 200%;
width: 50%;
}
</style>
</head>
<body>
<a href="http://www.o2fo.com">Visit the website</a>
<p>I like <span>HTML</span> and CSS.</p>
</body>
</html>百分比值的一個(gè)很好的功能是，當(dāng)您調(diào)整瀏覽器窗口的大小時(shí)，值正在更新。
相對(duì)于字體大小
以下代碼使用相對(duì)單位。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {
background: grey;
color:white;
font-size: 15pt;
height: 2em;
}
</style>
</head>
<body>
<p>This is a test.</p>
<p style="font-size:12pt">This is another test.</p>
</body>
</html>上面的代碼將height屬性設(shè)置為 2em ，這意味著 p元素的高度是字體大小的兩倍。
第一個(gè) p 元素的字體大小為15pt。第二個(gè) p 元素的 ?font-size? 為12pt。
派生自其他相對(duì)值
您可以使用相對(duì)單位來表示另一個(gè)相對(duì)度量的倍數(shù)。
以下示例顯示 height 屬性以 em 單位表示。 em 單位派生自? font-size? 屬性的值，其使用 rem 單位表示。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
html {
font-size: 0.2in;
}
p {
background: grey;
color:white;
font-size: 2rem;
height: 2em;
}
</style>
</head>
<body style="font-size:14pt">
<a href="http://www.o2fo.com">website</a>
<p>This is a test.</p>
<a rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >W3C</a>
</body>
</html>上述示例分配的絕對(duì)字體大小為 0.2 英寸。
rem 單位是相對(duì)于字體大小的 HTML 元素，也稱為根元素。
?font-size? 值 2rem 意味著字體大小將是根元素字體 0.4 英寸的大小的兩倍。
相同樣式中的 ?height? 屬性被指定為 ?2em?，這是再次的兩倍。這意味著瀏覽器將使用高度為0.4英寸的字體顯示 ?p? 元素，并且整體元素將為 0.8 英寸高。
另一個(gè)與字體相關(guān)的相對(duì)單位是 ex ， 1ex 大約為 0.5em 。
像素
主流瀏覽器將 1 個(gè)像素視為 1/96 英寸。
下面的代碼演示了如何指定 CSS 樣式中的像素。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {
background: grey;
color:white;
font-size: 20px;
width: 200px;
}
</style>
</head>
<body>
<p>This is a test.</p>
</body>
</html>px 單位更靈活。你只需要改變字體的大小，其余的風(fēng)格無縫地工作。
百分比
您可以將度量單位表示為另一個(gè)屬性值的百分比。
您可以使用%（百分比）單位。
以下代碼將單位表示為另一個(gè)屬性值的百分比。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {
background: grey;
color:white;
font-size: 200%;
width: 50%;
}
</style>
</head>
<body>
<a href="http://www.o2fo.com">website</a>
<p>this is a test.</p>
<a rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >W3C</a>
</body>
</html>
更多建議：