CSS Units

初发布于 04 Feb 2015 | in CSS

CSS 有一些不同的单位用来描述一个长度 length。许多 CSS 属性可取值 length（即一个浮点数字+css unit），如：width, margin, padding, font-size, border-width, 等。

表示长度的数字和单位之间不能有 whitespace 空格。

如果 value 值为 0，单位可以缺省。

对于一些 CSS 属性，length 允许负值。

CSS 有两种类型的 length 单位，相对的和绝对的。

Relative Length

相对长度，定义了一个 length 相对于另一个 length 的值。

枚举：em, ex, ch, rem, vw, vh, vmin, vmax, %, px

pixels (1px = 1/96th of 1in)

length 取值相对于当前元素的 font-size，注意：字体是可继承的，当前字体大小可能有变。

length 取值相对于根元素 <html> 的字体大小而言。因为根元素字体通常定义一次不再改变，使用 rem 作为长度单位的 CSS 属性因而稳定且 consistent。

em 和 rem 长度单位常用于创建可缩放的布局。

vm 是 CSS3 新增的单位，代表 viewport 宽的 1%。那么 100vm 就表示整个 viewport 宽度。视图高度的百分之几则用 vh 表示。

绝对长度单位的长度是固定的，任何由这些单位表示的 length 将表现出 exactly that size。

因为屏幕的多样性，不建议在 screen 上使用这种单位设定长度。但是如果输出媒体是已知的，如：打印机的布局。

枚举：cm, mm, in, pt, pc

inches (1in = 96px = 2.54cm)

points (1pt = 1/72 of 1in)