長度是用于表示距離尺寸的 CSS 數據類型。許多 CSS 屬性會用到長度，比如 width、margin、padding、font-size、border-width 和 text-shadow。

注意：雖然值也是 CSS 維度，并且可以在接受值的某些相同屬性中使用，但它們本身不是值。

語法

數據類型由一個和一個長度單位構成。與所有 CSS 維度一樣，單位的字面值與數字之間沒有空格。數字為 0 時，長度單位是可選的。

相對長度單位

相對長度代表著以其它距離為單位的一種尺寸。這個單位可以是指定字符的大小，行高，或者是 viewport 的大小。

字體相對長度

字體相對長度根據元素或其父元素中當前有效字體中的特定字符或字體屬性的大小定義值。注意：這些單位，特別是em和rem，通常用于創建可伸縮的布局，即使用戶更改字體大小，也可以保持頁面的垂直節奏。

• em：相對長度單位，這個單位表示元素的 font-size 的計算值。如果用在font-size 屬性本身，它則表示元素繼承的 font-size 值。
• ex：這個單位表示元素font的 x-height 。在含有“X”字母的字體中，它是該字體的小寫字母的高度；對于很多字體來說，1ex ≈ 0.5em。
• rem：這個單位代表根元素的 font-size 大小（例如元素的font-size）。當用在根元素的 font-size 上面時，它代表了它的初始值。
• ch：這一單位代表元素所用字體 font 中“0”這一字形的寬度（"0"，Unicode字符U+0030），更準確地說，是“0”這一字形的預測尺寸（advance measure）。如果無法確定“ 0”字形的大小，則必須假定其寬為 0.5em，高為 1em。
• ic：等于在用于渲染的字體中找到的“水”（CJK 表意文字"水"，U + 6C34）字形的使用預先測量（used advance measure）。
• lh：等于使用它的元素的 line-height 屬性的計算值，轉換為絕對長度。
• rlh：等于根元素行高 line-height 的計算值。當用于設置根元素的行高 line-height 或是字體大小 font-size 時，該rlh指的是根元素行高 line-height 或字體大小 font-size 的初始值。
• cap：表示元素字體 font 的“上限高度”（cap height，大寫字母的標稱高度（nominal height））。

視口(Viewport)比例的長度

視口百分比長度定義相對于 viewport 的大小的值，即文檔的可見部分。視口長度在@page 聲明塊中無效。

• vh：視口的初始包含塊的高度的 1%。
• vw：視口的初始包含塊的寬度的 1%。
• vmin：視口高度 vw 和寬度 vh 兩者之間的最小值。
• vmax：視口高度 vw 和寬度 vh 兩者之間的最大值。
• vi：等于初始包含塊大小的 1%，在根元素的行內軸方向上。
• vb：等于初始包含塊大小的 1%，在根元素的區塊軸方向上。

絕對長度單位

當輸出介質的物理性質已知時，如用于打印布局，絕對長度單位代表一個物理度量單位。這是通過：將一個單元錨定到一個物理單元，并將其定義為相對于它的另一個，來實現的。對于低分辨率的設備（如屏幕），高分辨率設備（如打印機），該錨定是不同的。

對于低 dpi 設備，單位 px 表示物理參考像素；其他單位是相對于它定義的。因此，1 in 定義為 96px，等于 72pt。此定義的后果是，在此類設備上，以英寸（in）、厘米（cm）或毫米（mm）表示的尺寸不需要與同名的物理單位的大小相匹配。

對于高 dpi 設備，英寸（in）、厘米（cm）和毫米（mm）與物理設備相同。因此，px 單位是相對于它們定義的（1/96 of 1 inch）

• px：一像素（pixel）。對于普通的屏幕，通常是一個設備像素（點）。對于打印機和高分辨率屏幕，一個 CSS 像素往往占多個設備像素。一般來說，每英寸的像素的數量保持在 96 左右， 1px = 1in 的 96 分之一。
• cm：一厘米。 1cm = 96px / 2.54。
• mm：一毫米。 1mm = 1/10 * 1cm。
• in：一英寸。1in = 2.54cm = 96px。
• pc：一十二點活字（pica），六分之一英寸。 1pc = 12pt = 1/6 * 1in。
• pt：一磅（point），72 分之一英寸。1pt = 1/12 * 1pc = 1/72 * 1in。
• Q：四分之一毫米。1Q = 1/40 * 1cm。

規范

CSS版本狀態新增

CSS Values and Units Module Level 4	實驗中	vi、vb、ic、lh、rlh
CSS Values and Units Module Level 3	正常	ch、rem、vw、vh、vmin、vmax、Q

鵬仔微信 15129739599 鵬仔QQ344225443 鵬仔前端 pjxi.com 共享博客 sharedbk.com

免責聲明：我們致力于保護作者版權，注重分享，當前被刊用文章因無法核實真實出處，未能及時與作者取得聯系，或有版權異議的，請聯系管理員，我們會立即處理! 部分文章是來自自研大數據AI進行生成,內容摘自(百度百科,百度知道,頭條百科,中國民法典,刑法,牛津詞典,新華詞典,漢語詞典,國家院校,科普平臺)等數據,內容僅供學習參考,不準確地方聯系刪除處理!郵箱：344225443@qq.com)

圖片聲明：本站部分配圖來自網絡。本站只作為美觀性配圖使用,無任何非法侵犯第三方意圖,一切解釋權歸圖片著作權方,本站不承擔任何責任。如有惡意碰瓷者,必當奉陪到底嚴懲不貸!