Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

这篇文章需要技术复核。如何帮忙。

这篇文章需要文法复核。如何帮忙。

概述

CSS 的<length>类型表示距离测度。它是一个 <number> 后紧随一个长度单位(px,em,px,in,mm,...)。和任何 CSS 尺寸一样,数字和单位之间没有空格。<number> 0之后的长度单位是可选的。

许多CSS属性使用<length>值,比如widthmarginpaddingfont-sizeborder-widthtext-shadow...

对于某些属性,长度使用负值会有语法错误,但是有一些属性是允许负长度的。请注意虽然<percentage>也是CSS尺寸并且可以被一些 CSS属性接受为<length>值,但它们本身不是<length>值。

插值

为了用于动画,CSS类型<length>的值是可以被插值的。在这种情况下,它们被插值成实数、浮点数、数字。插值发生数值计算时,插值的速度由动画关联的定时器决定。

单位

相对长度单位

相对字体大小单位

em
相对长度单位,这个单位表示元素的font-size的计算值。如果用在font-size 属性本身,它会继承父元素的font-size。
这个单位常用于创建可伸缩布局,这样即便用户更改了字体尺寸,也可以保持 vertical rhythm of the page。CSS属性line-heightfont-sizemargin-bottommargin-top常具有一个用em表示的值。
ex
这个单位表示元素fontx-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 在规则声明块的长度,视口使用无效,声明将被丢弃。

vh
视口高度的 1/100。
vw
视口宽度的 1/100。
vmin
视口高度和宽度之间的最小值的 1/100。
vmax
视口高度和宽度之间的最大值的 1/100。

绝对长度单位

绝对长度单位代表一个物理测量,当输出介质的物理性质是已知的,如用于打印布局。这是通过将一个单元锚定到一个物理单元,并将其定义为相对于它的另一个。对于低分辨率的设备,如屏幕、高分辨率设备,如打印机,该锚定是不同的。

低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.

文档标签和贡献者

 最后编辑者: Sebastianz,