CSS 的值与单位

本文主要总结了 CSS 中的值和单位。

值类型

数值类型	描述
<integer>	<integer> 是一个整数，比如 1024 或 - 55。
<number>	<number> 表示一个小数 —— 它可能有小数点后面的部分，也可能没有，例如 0.255、128 或 - 1.2。
<dimension>	<dimension> 是一个 <number>，它有一个附加的单位，例如 45deg、5s 或 10px。<dimension> 是一个伞形类别，包括 <length>、<angle>、<time> 和 <resolution> 类型。
<percentage>	<percentage> 表示一些其他值的一部分，例如 50%。百分比值总是相对于另一个量，例如，一个元素的长度相对于其父元素的长度。

长度单位

绝对长度单位

单位	名称	等价换算
cm	厘米	1cm = 96px/2.54
mm	毫米	1mm = 1/10th of 1cm
Q	四分之一毫米	1Q = 1/40th of 1cm
in	英寸	1in = 2.54cm = 96px
pc	十二点活字	1pc = 1/16th of 1in
pt	点	1pt = 1/72th of 1in
px	像素	1px = 1/96th of 1in

相对长度单位

相对长度单位相对于其他一些东西，比如父元素的字体大小，或者视图端口的大小。使用相对单位的好处是，经过一些仔细的规划，可以使文本或其他元素的大小与页面上的其他内容相对应。

下表列出了 web 开发中一些最有用的单位。

单位	相对于
em	在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如 width
ex	字符 “x” 的高度
ch	数字 “0” 的宽度
rem	根元素的字体大小
lh	元素的 line-height
vw	视窗宽度的 1%
vh	视窗高度的 1%
vmin	视窗较小尺寸的 1%
vmax	视图大尺寸的 1%

参考

1. CSS 的值与单位