这篇文章需要技术复核。如何帮忙。
这篇文章需要文法复核。如何帮忙。
概述
CSS 的<length>类型表示距离测度。它是一个 <number> 后紧随一个长度单位（px，em，px，in，mm，...）。和任何 CSS 尺寸一样，数字和单位之间没有空格。<number> 0之后的长度单位是可选的。
许多CSS属性使用<length>值，比如width、margin、padding、font-size、border-width、text-shadow...
对于某些属性，长度使用负值会有语法错误，但是有一些属性是允许负长度的。请注意虽然<percentage>也是CSS尺寸并且可以被一些 CSS属性接受为<length>值，但它们本身不是<length>值。
插值
为了用于动画，CSS类型<length>的值是可以被插值的。在这种情况下，它们被插值成实数、浮点数、数字。插值发生数值计算时，插值的速度由动画关联的定时器决定。
单位
相对长度单位
相对字体大小单位
em- 相对长度单位，这个单位表示元素的
font-size的计算值。如果用在font-size属性本身，它会继承父元素的font-size。这个单位常用于创建可伸缩布局，这样即便用户更改了字体尺寸，也可以保持 vertical rhythm of the page。CSS属性line-height，font-size，margin-bottom和margin-top常具有一个用em表示的值。 ex- 这个单位表示元素
font的 x-height 。在“X”字母的字体，这是一般字体中的小写字母的高度；在很多字体中 1ex ≈ 0.5em。 ch- 这个单位表示的宽度，或更精确的推进措施，字形的“0”（零，Unicode字符U+0030）在元的
font。 rem- 这个单位代表相对于根元素的
font-size大小（例如 font-size<html>元素）。当用在font-size在根元素，它代表了它的初始值。该单位在实际使用中一般用于创建完美的可扩展布局。如果不被目标浏览器支持，可以使用em单位，虽然会稍微复杂一些。
视口比例的长度
视口比例长度定义了相对于视口的长度大小，这是文档的可见部分。 当视口的大小被修改（通过更改桌面计算机窗口大小或旋转手机或平板设备的方向）时，只有基于Gecko的浏览器才动态更新视口值。
结合 overflow:auto，滚动条最终占用的空间大小不是减去视口大小之后的宽度，而 overflow:scroll 才是。
在 @page 在规则声明块的长度，视口使用无效，声明将被丢弃。
绝对长度单位
绝对长度单位代表一个物理测量，当输出介质的物理性质是已知的，如用于打印布局。这是通过将一个单元锚定到一个物理单元，并将其定义为相对于它的另一个。对于低分辨率的设备，如屏幕、高分辨率设备，如打印机，该锚定是不同的。
低DPI设备，单位像素代表物理参考像素和其他人是指相对于它。因此，在定义为96px等于72pt。这个定义的结果是，在这样的设备，长度在英寸（in），厘米（cm），毫米（mm），没有必要匹配的物理单位的长度相同的名称。
高DPI设备，英寸（in），厘米（cm），毫米（mm）被定义为他们对应的实体。因此，px单位和他们相关（1 / 96 英寸）。
用户可以增加字体大小，用于辅助功能。为了允许使用的布局，无论是所使用的字体大小，只使用绝对长度单位时，输出介质的物理特性是已知的，如位图图像。设置字体大小相关的长度时，更喜欢相对单位像EM或REM。
px- 与显示设备相关。
对于屏幕显示，通常是一个设备像素（点）的显示。
对于打印机和高分辨率的屏幕，一个CSS像素意味着多个设备像素，因此，每英寸的像素的数量保持在96左右。 mm- 毫米。
cm- 厘米（10毫米）。
in- 英寸（2.54厘米）。
pt- 磅（1/72 英寸）。
pc- 12 点活字 (1 pc 等于 12 点)。
mozmm- 一个实验单位，它试图使精确的一毫米，无论大小或分辨率的显示器。这很少是你想要的，但可能是有用的，特别是对于移动设备。
CSS 单位和每英寸点数（DPI）
CSS 的单位不是根据物理上的英寸来表现的，而是表现为 96px（译注：这里指的应该是 1in = 96px）。这意味着无论真实屏幕的像素密度是多少，（在 CSS 中）它都假设为 96dpi。在一个高像素密度的设备中，1in 会小于实际的 1 物理英寸。类似地 mm、cm 和 pt 都不是一个绝对的长度单位。
一些具体的例子：
- 1in 总是（等于）96px
- 3pt 总是（等于）4px
- 25.4mm 总是（等于）96px
规范
| Specification | Status | Comment |
|---|---|---|
| CSS Values and Units Module Level 3 <length> |
Candidate Recommendation | Added ch, rem, vw, vh, vmin, vmax |
| CSS Level 2 (Revision 1) <length> |
Recommendation | pt, pc, px are explicitly defined (were implicitly defined in CSS1) |
| CSS Level 1 <length> |
Recommendation | Initial definition |
浏览器兼容性
| 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) | ? | ? | ? |
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.0[2] | 20.0 | 6.0 |
vmax |
26 | 19 (19) | 未实现 | 20.0 | (Yes) |
Viewport-percentage lengths invalid in @page |
? | 21 (21) | ? | ? | ? |
mozmm |
未实现 | 4.0 (2.0) | 未实现 | 未实现 | 未实现 |
1in always is 96dpi |
(Yes) | 4.0 (2.0) | (Yes) | (Yes) | (Yes) |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
ch |
未实现 | (Yes) | 7.8 | ? | 7.1.1 |
| ex | ? | (Yes) | ? | ? | ? |
rem |
2.1 | (Yes) | ? | 12.0 | 4.0 |
vh, vw, vmin |
(Yes) | 19.0 (19) | ? | 未实现 | 6.0 |
vmax |
1.5 | 19.0 (19) | ? | 未实现 | 4.0 |
Viewport-percentage lengths invalid in @page |
? | 21.0 (21.0) | ? | ? | ? |
[1] In Gecko 1.0-1.9.0 (Firefox 1.0-3.0) ch was the width of 'M' and it didn't work for border-width and outline-width CSS properties.
[2] Internet Explorer implements this with the non-standard name vm.