<length>

概述

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
这个单位表示高度的元素{ { cssxref(“字体”)} }。在“X”字母的字体,这是一般字体中的小写字母的高度;1ex≈0.5em很多字体。
ch
这个单位表示的宽度,或更精确的推进措施,字形的“0”(零,Unicode字符u + 0030)在元的{ { cssxref(“字体”)} }。
rem
这个单位是{ { cssxref(“字体大小”)} }的根元素(例如的{ { HtmlElement字体大小(“HTML”)} }元)。当用在{ { cssxref(“字体大小”)} }在这个根元素,它代表了它的初始值。
该单元是实用的,在创建完美的可扩展布局。如果不支持有针对性的浏览器,这样的布局可以实现使用电磁单元,虽然这是稍微复杂。

视口比例的长度

视口比例长度定义的长度相对于视口的大小,这是文档的可见部分。只有基于Gecko的浏览器更新视图值动态,当视口的大小被修改(修改窗口的大小在桌面计算机上或通过转动装置在手机或平板电脑)。

结合溢出:汽车,空间最终的滚动条拍的不是减去视口,而溢出的情况:滚动,它是。

在{ { cssxref(“页”)} }在规则声明块的长度,视口使用无效,声明将下降。

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

绝对长度单位

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

低DPI设备,单位像素代表物理参考像素和其他人是指相对于它。因此,在定义为96px等于72pt。这个定义的结果是,在这样的设备,长度在英寸(英寸),厘米(厘米),毫米(厘米),没有必要匹配的物理单位的长度相同的名称。

高DPI设备,英寸(中),厘米(cm),毫米(mm)被定义为他们的身体。因此,像素单元被定义相对于它们(1 / 1的96英寸)。

用户可以增加字体大小,用于辅助功能。为了允许使用的布局,无论是所使用的字体大小,只使用绝对长度单位时,输出介质的物理特性是已知的,如位图图像。设置字体大小相关的长度时,更喜欢相对单位像EM或REM。

px
相对于观看装置。
对于屏幕显示,通常是一个设备像素(点)的显示。
打印机和高分辨率的屏幕一个CSS像素意味着多个设备像素,因此,每英寸的像素的数量保持在96左右。
mm
一毫米。
cm
一厘米(10毫米)。
in
一英寸(2.54厘米)。
pt
一点(72 / 1英寸)。
pc
一异食癖 (这是 12 点)。
mozmm
一个实验装置,它试图使精确的一毫米,无论大小或分辨率的显示器。这很少是你想要的,但可能是有用的,特别是对于移动设备。

CSS单位和每英寸点数

在没有单位代表屏幕上的物理英寸,但代表96px。这意味着,无论是真正的屏幕像素密度,它被假定为96dpi。在一个更大的像素密度的设备,1将小于1物理英寸。类似毫米,厘米,和铂是不是绝对长度。

一些具体的例子:

  • 1总是96px,
  • 3总是4px,
  • 总是96px 25.4mm

规范

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  

浏览器兼容性

Feature Chrome (WebKit) 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 or before
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 (with the non-standard name vm) 20.0 6.0
vmax 26 19 (19) 未实现 20.0 未实现 (537.30)
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
rem 2.1 (Yes) ? 12.0 4
vh, vw, vmin (Yes) 19.0 (19) ? 未实现 6.0
vmax 未实现 (bug 91440) 19.0 (19) ? 未实现 未实现 (bug 91440)
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.

参见

文档标签和贡献者

向此页面作出贡献: ziyunfei, lttxzmj, sartrey, FredWe
最后编辑者: ziyunfei,