长度是用于表示距离尺寸的 CSS 数据类型。许多 CSS 属性会用到长度，比如 width、margin、padding、font-size、border-width 和 text-shadow。

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

语法

相对长度单位

相对长度代表着以其它距离为单位的一种尺寸。这个单位可以是指定字符的大小，行高，或者是 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。

规范

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