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