长度 | <length> (Values & Units) - CSS 中文开发手册
<length>CSS数据类型表示距离的值。有许多CSS属性取<length>值，如width，margin，padding，font-size，border-width，text-shadow等。
对于一些属性，负长度是一个语法错误，但对于其他某些属性负长度则是允许的。请注意，虽然<percentage>值也是CSS尺寸值（CSS dimensions），而且也能被一些接受<length>值的CSS属性所接受，但它们本身并不是<length>值。
语法
length由一个<number>和一个单位（px，em，pc，in，mm，...）组成。与所有CSS尺寸值（CSS dimension）一样，单位和数字之间没有空格。数字0后面的长度单位是可选的（仅在数字0后面时单位才可以省略）。
线性插值
在animation中，length值被作为浮点实数插值。插值发生在计算数值时。其速度由与动画相关的timing函数决定。
单位
相对长度单位
相对长度（relative lengths）根据其他事物的长度来描述长度，例如当前字体中特定字符的大小，父元素的大小或视口的大小。相对长度单位表示指定值选定哪个其他长度作为参考。
字体相对长度
字体相对长度<length>根据当前在元素（或特定情况下的元素的父元素，如下所述）中生效的字体中的特定字符或字体属性的大小来指定长度值。
em——表示元素计算出的font-size值。如果在font-size属性本身上使用，则表示元素所继承的字体大小。
该单位通常用于创建可缩放的布局，即使用户更改字体大小，也可以保持页面的垂直结构。CSS属性line-height，font-size，margin-bottom，和margin-top常常使用em来表示其长度。
ex——表示元素的font的x-height。对于带有“x”字母的字体，这通常是字体中小写字母的高度; 在许多字体中1ex ≈ 0.5em。
cap——表示元素的font的“cap height”（大写字母的标称高度）。
ch——表示元素的font中的字符“0”（零，Unicode字符U + 0030）的宽度，或者更准确地说是“0”的高级度量（advanced measure）。
ic——等于在用于呈现字符“水”（CJK水象形文字，U + 6C34）中所使用的高级度量。
rem——表示根元素的font-size（例如，元素<html>的字体大小）。在根元素中使用时，它代表了它的初始值（常见的浏览器默认是16px，但根据用户偏好而变化）。
这个单位通常用于创建可扩展的布局。如果目标浏览器不支持这种布局，则可以使用该em单元来实现这种布局，但这会稍微复杂一些。
lh——等于当前元素的line-height属性的计算值（转换为绝对长度）。
rlh——等于当前元素的根元素的line-height属性的计算值(转换为绝对长度)。当被指定为根元素的font-size或line-height属性时，rlh单位是指该属性的初始值。
视口百分比长度
视口百分比长度定义了相对于视口大小的长度，即文档的可见部分。
如果将html和body设置为overflow:auto，滚动条所占用的空间不会从视口中减去，如果设置为overflow:scroll，则会将其减去。
视图的长度在@page声明块中是无效的。
vh——等于视口初始包含块高度的1％。
vw——等于视口初始包含块的宽度的1％。
vi——在根元素的内联轴（inline axis）的方向上，等于初始包含块的大小的1％。
vb——在根元素的块轴的方向上（block axis），等于初始包含块的大小的1％。
vmin——等于vw和vh中的较小值。
vmax等于vw和vh中的较大值。
绝对长度单位
当输出介质的物理属性已知时，绝对长度单位表示物理测量单位，例如用于打印布局时。这是通过将一个单位锚定到一个物理单位，然后定义其他单位来完成的。对于低分辨率设备（如屏幕）和高分辨率设备（如打印机）来说，定位是不同的。
对于低dpi设备，单位px表示物理参考像素，然后相对于其定义其他单位。因此，1in被定义为96px（等于72pt）。这个定义的结果是，在这样的设备上，以英寸（in），厘米（cm）或毫米（mm）所描述的长度不必与具有相同名称的物理单元的长度相匹配。
对于高dpi设备，英寸（in），厘米（cm）和毫米（mm）被定义为其物理尚的对应单位。因此，相对于它们来定义px单位（1英寸的1/96）。
用户可能会增加字体大小以便于访问。为了允许布局的可用性而不考虑字体大小，只有在输出介质的物理特性已知时才使用绝对长度单位，例如位图图像。当设置与font-size相关的长度时，首选的单位应该是em或 rem。
px——与浏览设备有关。
对于屏幕显示，通常是显示器的一个设备像素（点）。
对于打印机和非常高分辨率的屏幕，一个CSS像素意味着多个设备像素，因此每英寸的像素数量保持在96个左右。
mm——一毫米。
q——四分之一毫米（1/40厘米）。
cm——一厘米（10毫米）。
in——一英寸（2.54厘米）。
pt——一点point（1/72英寸）。
pc——一派卡pica（12points）。
mozmm——不管显示器的尺寸或分辨率如何，都试图精确地呈现一毫米的单位长度。这实际上很少是你想要的效果，但可能对移动设备特别有用。
CSS单位和每英寸点数
该单位in不代表屏幕上的物理英寸，而是代表96px。这意味着，无论是真实的屏幕像素密度，它被假定为96dpi。在像素密度更大的设备上，1in将小于1个物理英寸。同样mm，cm和pt都不是绝对的长度。
一些具体的例子：
1in总是96px.3pt总是4px...25.4mm总是96px.
规范
| Specification | Status | Comment |
|---|---|---|
| UnknownThe definition of '<length>' in that specification. | Unknown | Addition of the vi, vb, ic, lh, and rlh units. |
| CSS Values and Units Module Level 3The definition of '<length>' in that specification. | Candidate Recommendation | Addition of the ch, rem, vw, vh, vmin, vmax, and q units. |
| CSS Level 2 (Revision 1)The definition of '<length>' in that specification. | Recommendation | Explicit definition of the pt, pc, and px units. |
| CSS Level 1The definition of '<length>' in that specification. | Recommendation | Initial definition. Implicit definition of the pt, pc, and px units. |
浏览器兼容性
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 1 | 1.0 (1.7 or earlier) | 3.0 | 3.5 | 1.0 |
| ch | 27 | 1.0 (1.7 or earlier)1 | 9.0 | 20.0 | 7.0 |
| ex | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
| rem | 4 (532.3) | 3.6 (1.9.2) | 9.0 | 11.6 | 4.1 |
| vh, vw | 20 | 19 (19) | 9.0 | 20.0 | 6.0 |
| vmin | 20 | 19 (19) | 9.02 | 20.0 | 6.0 |
| vmax | 26 | 19 (19) | No support | 20.0 | (Yes) |
| Viewport-percentage lengths invalid in @page | ? | 21 (21) | ? | ? | ? |
| mozmm | No support | 4.0 (2.0) | No support | No support | No support |
| 1in always is 96dpi | (Yes) | 4.0 (2.0) | (Yes) | (Yes) | (Yes) |
| q | No support | 49.0 (49.0) | No support | No support | No support |
| vi, vb, ic, lh, rlh, and cap | No support | No support | No support | No support | No support |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
| ch | No support | (Yes) | 7.8 | ? | 7.1.1 |
| ex | ? | (Yes) | ? | ? | ? |
| rem | 2.1 | (Yes) | ? | 12.0 | 4.0 |
| vh, vw, vmin | (Yes) | 19.0 (19) | ? | No support | 6.0 |
| vmax | 1.5 | 19.0 (19) | ? | No support | 4.0 |
| Viewport-percentage lengths invalid in @page | ? | 21.0 (21.0) | ? | ? | ? |
| q | ? | 49.0 (49.0) | ? | ? | No support |
| vi, vb, ic, lh, rlh, and cap | No support | No support | No support | No support | No support |