<length>
Baseline 廣泛可用 *
<length> CSS 資料型別表示一個距離值。長度可用於許多 CSS 屬性，例如 width、height、margin、padding、border-width、font-size 和 text-shadow。
備註： 雖然 <percentage> 值可用於某些接受 <length> 值的屬性，但它們本身並不是 <length> 值。參見 <length-percentage>。
語法
<length> 資料型別由一個 <number> 後跟一個下面列出的單位組成。與所有 CSS 維度一樣，數字和單位字面量之間沒有空格。如果數字是 0，則指定長度單位是可選的。
備註： 有些屬性允許負的 <length> 值，而有些則不允許。
長度的指定值（specified length）由其數量和單位表示。長度的計算值（computed length）是解析為絕對長度的指定長度，其單位不作區分。
<length> 單位可以是相對的或絕對的。相對長度表示相對於其他某個距離的度量。根據單位的不同，這個距離可以是特定字元的大小、行高，或者是視口的大小。使用相對長度單位的樣式表可以更容易地從一個輸出環境擴充套件到另一個輸出環境。
備註： 子元素不會繼承為其父元素指定的相對值；它們繼承的是計算值。
相對長度單位
CSS 相對長度單位基於字型、容器或視口大小。
基於字型的相對長度單位
字型長度單位根據元素或其父元素當前生效字型中特定字元的大小或字型屬性來定義 <length> 值。
備註： 這些單位，尤其是 em 和根相對單位 rem，常用於建立可伸縮的佈局，即使使用者更改字型大小，也能保持頁面的垂直節奏。
cap-
表示元素
font的“大寫字母高度”（大寫字母的標稱高度）。 ch-
表示元素
font中字形0（零，Unicode 字元 U+0030）的寬度，或更準確地說是前進量。在無法或不方便確定0字形度量的情況下，必須假定其寬度為0.5em，高度為1em。 emex-
表示元素
font的 x-height。在帶有x字母的字型中，這通常是字型中小寫字母的高度；在許多字型中1ex ≈ 0.5em。 ic-
等於用於渲染“水”字形（CJK 水錶意文字，U+6C34）的字型中該字形的前進量。
lh-
等於使用它的元素的
line-height屬性的計算值，並轉換為絕對長度。該單位允許基於理想空行的理論尺寸進行長度計算。然而，實際行框的大小可能因其內容而異。
基於根元素字型的相對長度單位
根元素字型相對長度單位根據根元素中特定字元的大小或字型屬性來定義 <length> 值。
基於視口的相對長度單位
視口百分比長度單位基於四種不同的視口尺寸：小、大、動態和預設。允許使用不同視口尺寸是為了應對瀏覽器介面動態展開和收起，以及顯示和隱藏下方內容的情況。
- 小視口單位
-
當希望在瀏覽器介面動態擴充套件時獲得儘可能小的視口，應使用小視口尺寸。小視口尺寸允許設計的內容在瀏覽器介面展開時填滿整個視口。當瀏覽器介面收起時，選擇此尺寸也可能留下空白區域。
例如，一個使用基於小視口尺寸的視口百分比單位來確定大小的元素，當所有動態瀏覽器介面都顯示時，它將完美地填滿螢幕，內容不會被遮擋。然而，當這些瀏覽器介面被隱藏時，元素周圍可能會出現額外的空間。因此，小視口百分比單位通常更“安全”，但在使用者開始與頁面互動後，可能不會產生最吸引人的佈局。
小視口尺寸由
sv字首表示，併產生sv*視口百分比長度單位。小視口百分比單位的尺寸是固定的，因此是穩定的，除非視口本身被調整大小。 - 大視口單位
-
當希望在瀏覽器介面動態收起時獲得儘可能大的視口，應使用大視口尺寸。大視口尺寸允許設計的內容在瀏覽器介面收起時填滿整個視口。需要注意的是，當瀏覽器介面展開時，內容可能會被隱藏。
例如，在螢幕空間寶貴的手機上，瀏覽器通常會在使用者開始滾動頁面後隱藏部分或全部的標題欄和位址列。當一個元素使用基於大視口尺寸的視口百分比單位來確定大小時，當這些瀏覽器介面被隱藏時，元素的內容將填滿整個可見頁面。然而，當這些可伸縮的瀏覽器介面顯示時，它們可能會隱藏使用大視口百分比單位來確定大小或定位的內容。
大視口單位由
lv字首表示，併產生lv*視口百分比單位。大視口百分比單位的尺寸是固定的，因此是穩定的，除非視口本身被調整大小。 - 動態視口單位
-
當希望視口根據瀏覽器介面動態展開或收起而自動調整大小時，可以使用動態視口尺寸。動態視口尺寸允許設計的內容精確地適應視口，而不管動態瀏覽器介面是否存在。
動態視口單位由
dv字首表示，併產生dv*視口百分比單位。動態視口百分比單位的尺寸是不穩定的，即使視口本身沒有改變。備註： 雖然動態視口尺寸可以提供更多的控制和靈活性，但使用基於動態視口的視口百分比單位可能會導致內容在使用者滾動頁面時重新調整大小。這可能導致使用者介面降級並造成效能問題。
- 預設視口單位
-
預設視口尺寸由瀏覽器定義。由此產生的視口百分比單位的行為可能等同於基於小視口尺寸、大視口尺寸、介於兩者之間的中間尺寸或動態視口尺寸的視口百分比單位。
備註： 例如，瀏覽器可能會將高度的預設視口百分比單位（
vh）實現為等同於大視口百分比高度單位（lvh）。如果是這樣，當瀏覽器介面展開時，這可能會遮擋全屏顯示的內容。目前，所有預設視口單位（vh、vw等）都等同於其對應的大視口單位（lvh、lvw等）。
視口百分比長度單位定義了相對於初始包含塊尺寸的百分比 <length> 值，而初始包含塊的尺寸又基於視口或頁面區域（即可見文件部分）的大小。當初始包含塊的高度或寬度改變時，基於它們大小的元素也會相應縮放。如下所述，每個視口尺寸都有一個對應的視口百分比長度單位變體。
備註： 視口長度單位在 @page 宣告塊中無效。
vh-
表示視口初始包含塊高度的百分比。
1vh是視口高度的 1%。例如，如果視口高度是300px，那麼屬性值為70vh將是210px。針對小、大和動態視口尺寸的相應視口百分比單位分別是
svh、lvh和dvh。vh等同於lvh，表示基於大視口尺寸的視口百分比長度單位。 vw-
表示視口初始包含塊寬度的百分比。
1vw是視口寬度的 1%。例如，如果視口寬度是800px，那麼屬性值為50vw將是400px。針對小、大和動態視口尺寸，相應的視口百分比單位是
svw、lvw和dvw。vw等同於lvw，表示基於大視口尺寸的視口百分比長度單位。 vmax-
以百分比表示
vw和vh中的較大值。針對小、大和動態視口尺寸，相應的視口百分比單位是
svmax、lvmax和dvmax。vmax等同於lvmax，表示基於大視口尺寸的視口百分比長度單位。 vmin-
以百分比表示
vw和vh中的較小值。針對小、大和動態視口尺寸，相應的視口百分比單位是
svmin、lvmin和dvmin。vmin等同於lvmin，表示基於大視口尺寸的視口百分比長度單位。 vb-
針對小、大和動態視口尺寸，相應的視口百分比單位分別是
svb、lvb和dvb。vb等同於lvb，表示基於大視口尺寸的視口百分比長度單位。 vi-
針對小、大和動態視口尺寸，相應的視口百分比單位是
svi、lvi和dvi。vi等同於lvi，表示基於大視口尺寸的視口百分比長度單位。
容器查詢長度單位
當使用容器查詢為容器應用樣式時，可以使用容器查詢長度單位。這些單位指定一個相對於查詢容器尺寸的長度。使用相對於其容器的長度單位的元件在不同容器中使用時更加靈活，無需重新計算具體的長度值。
如果沒有可用的合格容器進行查詢，容器查詢長度單位將預設為該軸向的小視口單位（sv*）。
更多資訊，請參閱容器查詢。
cqw-
表示查詢容器寬度的百分比。
1cqw是查詢容器寬度的 1%。例如，如果查詢容器的寬度是800px，那麼屬性值為50cqw將是400px。 cqh-
表示查詢容器高度的百分比。
1cqh是查詢容器高度的 1%。例如，如果查詢容器的高度是300px，那麼屬性值為10cqh將是30px。 cqi-
表示查詢容器行內尺寸的百分比。
1cqi是查詢容器行內尺寸的 1%。例如，如果查詢容器的行內尺寸是800px，那麼屬性值為50cqi將是400px。 cqb-
表示查詢容器塊級尺寸的百分比。
1cqb是查詢容器塊級尺寸的 1%。例如，如果查詢容器的塊級尺寸是300px，那麼屬性值為10cqb將是30px。 cqmin-
表示查詢容器行內尺寸或塊級尺寸中較小值的百分比。
1cqmin是查詢容器行內尺寸或塊級尺寸中較小值的 1%。例如，如果查詢容器的行內尺寸是800px，塊級尺寸是300px，那麼屬性值為50cqmin將是150px。 cqmax-
表示查詢容器行內尺寸或塊級尺寸中較大值的百分比。
1cqmax是查詢容器行內尺寸或塊級尺寸中較大值的 1%。例如，如果查詢容器的行內尺寸是800px，塊級尺寸是300px，那麼屬性值為50cqmax將是400px。
絕對長度單位
當輸出介質的物理屬性已知時（例如列印佈局），絕對長度單位表示一個物理測量值。這是透過將其中一個單位錨定到一個物理單位或視角單位，然後定義其他單位相對於它來實現的。物理單位包括 cm、in、mm、pc、pt、px 和 Q。對於低解析度裝置（如螢幕）和高解析度裝置（如印表機），錨定的方式不同。
對於低 dpi 裝置，單位 px 表示物理上的參考畫素；其他單位是相對於它定義的。因此，1in 定義為 96px，這等於 72pt。這個定義的結果是，在這類裝置上，用英寸（in）、釐米（cm）或毫米（mm）描述的尺寸不一定與同名的物理單位的尺寸相匹配。
對於高 dpi 裝置，英寸（in）、釐米（cm）和毫米（mm）與其物理對應物相同。因此，px 單位是相對於它們定義的（1in 的 1/96）。
備註： 許多使用者會增加其使用者代理的預設字型大小，以使文字更易讀。絕對長度單位可能會導致無障礙問題，因為它們是固定的，不會根據使用者設定進行縮放。因此，在設定 font-size 時，應優先使用相對長度（如 em 或 rem）。
插值
在進行動畫時，<length> 資料型別的值會作為真實的浮點數進行插值。插值發生在計算值上。插值的速度由與動畫關聯的緩動函式決定。
示例
比較不同的長度單位
以下示例提供了一個輸入框，你可以在其中輸入一個 <length> 值（例如 300px、50%、30vw），以設定按下 Enter 或 Return 鍵後下方出現的結果條的寬度。
這可以讓你比較和對比不同長度單位的效果。
HTML
<div class="outer">
<div class="input-container">
<label for="length">Enter width:</label>
<input type="text" id="length" />
</div>
<div class="inner"></div>
</div>
<div class="results"></div>
CSS
html {
font-family: sans-serif;
font-weight: bold;
box-sizing: border-box;
}
.outer {
width: 100%;
height: 50px;
background-color: #eeeeee;
position: relative;
}
.inner {
height: 50px;
background-color: #999999;
box-shadow:
inset 3px 3px 5px rgb(255 255 255 / 50%),
inset -3px -3px 5px rgb(0 0 0 / 50%);
}
.result {
height: 20px;
box-shadow:
inset 3px 3px 5px rgb(255 255 255 / 50%),
inset -3px -3px 5px rgb(0 0 0 / 50%);
background-color: orange;
display: flex;
align-items: center;
margin-top: 10px;
}
.result code {
position: absolute;
margin-left: 20px;
}
.results {
margin-top: 10px;
}
.input-container {
position: absolute;
display: flex;
justify-content: flex-start;
align-items: center;
height: 50px;
}
label {
margin: 0 10px 0 20px;
}
JavaScript
const inputDiv = document.querySelector(".inner");
const inputElem = document.querySelector("input");
const resultsDiv = document.querySelector(".results");
inputElem.addEventListener("change", () => {
inputDiv.style.width = inputElem.value;
const result = document.createElement("div");
result.className = "result";
result.style.width = inputElem.value;
const code = document.createElement("code");
code.textContent = `width: ${inputElem.value}`;
result.appendChild(code);
resultsDiv.appendChild(result);
inputElem.value = "";
inputElem.focus();
});
結果
規範
| 規範 |
|---|
| CSS 值和單位模組第 4 級 # 長度 |
瀏覽器相容性
載入中…