长度 | <length>

<length>

<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。

这个单位通常用于创建可扩展的布局。如果目标浏览器不支持这种布局，则可以使用该em单元来实现这种布局，但这会稍微复杂一些。

lh——等于当前元素的line-height属性的计算值（转换为绝对长度）。

视口百分比长度

视口百分比长度定义了相对于视口大小的长度，即文档的可见部分。

如果将html和body设置为overflow:auto，滚动条所占用的空间不会从视口中减去，如果设置为overflow:scroll，则会将其减去。

视图的长度在@page声明块中是无效的。

vh——等于视口初始包含块高度的1％。

绝对长度单位

当输出介质的物理属性已知时，绝对长度单位表示物理测量单位，例如用于打印布局时。这是通过将一个单位锚定到一个物理单位，然后定义其他单位来完成的。对于低分辨率设备（如屏幕）和高分辨率设备（如打印机）来说，定位是不同的。

对于低dpi设备，单位px表示物理参考像素，然后相对于其定义其他单位。因此，1in被定义为96px（等于72pt）。这个定义的结果是，在这样的设备上，以英寸（in），厘米（cm）或毫米（mm）所描述的长度不必与具有相同名称的物理单元的长度相匹配。

对于高dpi设备，英寸（in），厘米（cm）和毫米（mm）被定义为其物理尚的对应单位。因此，相对于它们来定义px单位（1英寸的1/96）。

用户可能会增加字体大小以便于访问。为了允许布局的可用性而不考虑字体大小，只有在输出介质的物理特性已知时才使用绝对长度单位，例如位图图像。当设置与font-size相关的长度时，首选的单位应该是em或 rem。

px——与浏览设备有关。

对于屏幕显示，通常是显示器的一个设备像素（点）。

对于打印机和非常高分辨率的屏幕，一个CSS像素意味着多个设备像素，因此每英寸的像素数量保持在96个左右。

CSS单位和每英寸点数

该单位in不代表屏幕上的物理英寸，而是代表96px。这意味着，无论是真实的屏幕像素密度，它被假定为96dpi。在像素密度更大的设备上，1in将小于1个物理英寸。同样mm，cm和pt都不是绝对的长度。

一些具体的例子：

• 1in总是96px.

• 3pt总是4px...

• 25.4mm总是96px.

规范

浏览器兼容性