CSS属性值之长度

长度必须包含数字和长度单位，并且它们之间不允许出现空格。数字可以是整数或小数，可以是正数或负数。如果数字为0，则可以带单位，也可以不带。因此，以下都是合法的长度值：1.5em，-20px，0。

CSS的长度单位分为绝对长度单位和相对长度单位。使用绝对长度单位时，其值是一个固定的值；使用相对长度单位时，其长度值不是固定的，它会随着参考值的变化而变化。

常用的绝对长度单位有pt（点）、mm（毫米）、cm（厘米）、in（英寸），pt是一个标准印刷度量单位，一英寸是72 点，即 1pt = 1/72inmm、cm、in 这几个长度单位，大家已经很熟悉，不再赘述。

共有 3 种相对长度单位：em、ex 、px，前两个分别代表 “m-height” 和 “x-height”，即字母 m 的高度和字母 x 的高度，是常见的印刷度量单位。

px代表“像素”，实际上就是计算机屏幕上的一个点。像素被定义为相对定位，是因为它取决于显示器的分辨率。一旦分辨率确定，设置为px的尺寸就成为固定尺寸，不会自动缩放。

em是一个相对长度单位，1em被定义为一种给定字体的 font-size 值。如果一个元素的font-size 为 14px，那么对于该元素，1em 就等于 14px。当 em 用于设置元素的 font-size 属性本身时，em 的值会相对于父元素的字体大小。显然，em的值会随元素的不同而发生变化，这给计算带来极大的困难。于是，就产生了rem这个相对单位，它是相对于根元素（即html元素）的字体大小。由于根元素的字体大小始终不变，计算起来就容易多了。

ex是一个相对长度单位，1ex被定义为一种给定字体的小写字母“x”的高度。因此，这个值会随字体的不同而变化。然而，很多浏览器都没有内置 ex 高度值，只是简单的取 em 的值，再取其一半作为 ex 的值。所以，一般不推荐使用 ex 这个长度单位。

随着响应式Web设计的流行，px已经无法跟上时代的脚步。%、em、rem这几个能够自适应的相对长度单位开始流行。