<length>是表示距离尺寸的一种css数据格式。许多CSS属性使用它,比如widthmarginpaddingfont-sizeborder-widthtext-shadow

注意:虽然 <percentage> 值也是CSS维度,并且可以在接受<length>值的某些相同属性中使用,但它们本身不是<length>值。 请参阅<length-percentage>

语法

<length>数据类型包含<number>,后跟下面列出的单位之一。 与所有CSS维度一样,单位字面值与数字之间没有空格。 数字0后,长度单位是可选的。

单位

相对长度单位

相对长度代表着以其它距离为单位的一种尺寸。使用这个单位的,可以是指定字符的大小,行高,或者是viewport的大小。

字体相对长度
cap 
表示元素font的“上限高度”(大写字母的标称高度)。
em
相对长度单位,这个单位表示元素的font-size的计算值。如果用在font-size 属性本身,它会继承父元素的font-size。
ex
这个单位表示元素fontx-height 。在含有“X”字母的字体中,它是该字体的小写字母的高度;对于很多字体, 1ex ≈ 0.5em。
ch

这一单位代表元素所用字体 font中“0”这一字形的宽度(“0”,Unicode字符U+0030),或更准确地说是“0”这一字形的预测尺寸(advance measure)。

ic 
等于在用于渲染它的字体中找到的“水”(CJK水表意文字,U + 6C34)字形的使用预先测量。
lh 
等于使用它的元素的line-height属性的计算值,转换为绝对长度。
rem
这个单位代表根元素的 font-size 大小(例如 <html> 元素的font-size)。当用在根元素的font-size上面时 ,它代表了它的初始值
lh
等于元素行高line-height的计算值
rlh 
等于根元素行高line-height的计算值。当用于设置根元素的行高line-height或是字体大小font-size 时,该rlh指的是根元素行高line-height或字体大小font-size 的初始值
视口比例的长度

视口百分比长度定义相对于viewport的大小的<length>值,即文档的可见部分。 视口长度在@page声明块中无效。

vh
视口高度的 1/100。
vw
视口宽度的 1/100。
vi
等于初始包含块大小的 1/100,在根元素的内联轴方向上.
vb
等于初始包含块大小的 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毫米)。
Q 
四分之一毫米。1Q= 1/40的1cm
in
英寸(2.54厘米)。
pt
磅(1/72 英寸)。
pc
12 点活字 (1 pc 等于 12 点)。
mozmm , Firefox 59 移除
一个实验单位,无论显示器的尺寸或分辨率如何,都会尝试在一毫米处进行渲染。很少会用到,但可能在移动设备特别有用。

规范

Specification Status Comment
CSS Values and Units Module Level 4
<length>
Editor's Draft Adds the vi, vb, ic, lh, and rlh units.
CSS Values and Units Module Level 3
<length>
Candidate Recommendation Adds the ch, rem, vw, vh, vmin, vmax, and Q units.
CSS Level 2 (Revision 1)
<length>
Recommendation Explicit definition of the empt, pc, and px units.
CSS Level 1
<length>
Recommendation Initial definition. Implicit definition of the empt, pc, and px units.

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 1Edge Full support YesFirefox Full support 1IE Full support 3Opera Full support 3.5Safari Full support 1WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
cap unit
Experimental
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
ch unitChrome Full support 27Edge Full support 12Firefox Full support 1
Notes
Full support 1
Notes
Notes From Firefox 1 to Firefox 3, ch was the width of the M character.
Notes From Firefox 1 to Firefox 3, ch did not work with border-width and outline-width CSS properties.
IE Full support 9Opera Full support 20Safari Full support 7WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support 7.1Samsung Internet Android Full support Yes
ex unitChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
ic unit
Experimental
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
lh unit
Experimental
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
mozmm unit
ExperimentalNon-standard
Chrome No support NoEdge No support NoFirefox No support 4 — 59IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android ? Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
Q unit
Experimental
Chrome Full support 63Edge No support NoFirefox Full support 49IE No support NoOpera Full support 50Safari No support NoWebView Android Full support 63Chrome Android Full support 63Edge Mobile No support NoFirefox Android Full support 49Opera Android Full support 50Safari iOS No support NoSamsung Internet Android No support No
rem unitChrome Full support 4Edge Full support 12Firefox Full support 3.6IE Full support 9Opera Full support 11.6Safari Full support 4.1WebView Android Full support 2Chrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support 4Opera Android Full support 12Safari iOS Full support 4Samsung Internet Android Full support Yes
rlh unit
Experimental
Chrome No support NoEdge Full support YesFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile Full support YesFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
vb unit
Experimental
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
vh unitChrome Full support 20Edge Full support 12Firefox Full support 19IE Full support 9Opera Full support 20Safari Full support 6WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support 19Opera Android Full support YesSafari iOS Full support 6Samsung Internet Android Full support Yes
vi unit
Experimental
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
vmax unitChrome Full support 26Edge ? Firefox Full support 19IE No support NoOpera Full support 20Safari Full support YesWebView Android Full support 1.5Chrome Android Full support YesEdge Mobile ? Firefox Android Full support 19Opera Android No support NoSafari iOS Full support 4Samsung Internet Android Full support Yes
vmin unitChrome Full support 20Edge ? Firefox Full support 19IE Full support 10
Full support 10
Full support 9
Alternate Name
Alternate Name Uses the non-standard name: vm
Opera Full support 20Safari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android Full support 19Opera Android No support NoSafari iOS Full support 6Samsung Internet Android Full support Yes
vw unitChrome Full support 20Edge Full support 12Firefox Full support 19IE Full support 9Opera Full support 20Safari Full support 6WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support 19Opera Android Full support YesSafari iOS Full support 6Samsung Internet Android Full support Yes
Viewport-percentage lengths invalid in @pageChrome ? Edge ? Firefox Full support 21IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Full support 21Opera Android ? Safari iOS ? Samsung Internet Android ?
1in is always equal to 96pxChrome Full support YesEdge ? Firefox Full support 4IE No support NoOpera No support NoSafari No support NoWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
See implementation notes.
See implementation notes.
Uses a non-standard name.
Uses a non-standard name.