4.7 CSS 尺寸单位（size units）
有很多CSS属性需要使用尺寸单位：
font-size定义文本大小border-width定义元素边线宽度margin定义元素之间的距离left/right/top/bottom定义元素位置或相对偏移
CSS支持多种长度单位，最常用的尺寸单位有：
in英寸px像素%百分比em相对于父元素尺寸的比值ex相对于字符“x”的高度，此高度通常为字体尺寸的一半。
它们可被分成两大类：绝对长度单位（以不依赖于显示设备的绝对尺寸来定义长度）；相对长度单位（相对其它为浏览器所知的单位来定义长度）。
绝对长度度量有：英寸（in）、厘米（cm）、毫米（mm）、磅（point，写作pt）、字高（pica，写作pc）。绝对单位适合用于打印/印刷网络文档的应用场合。
CSS还支持以像素（Pixel）表示的“绝对”长度，即为计算机显示屏上的一个点。不过由于设备像素密度和分辨率的不同，像素的绝对大小在不同显示器上有很大差异。 所以像素实际上是一种相对于显示器的尺寸单位。
相对长度度量有：em、rem和percentage（百分比）。相对单位适合用于屏幕显示。
下面对于其中常用的单位分别举例说明。
像素（Pixels）
由于计算机屏幕使用像素来绘制对象，所以这是最常用的CSS尺寸单位。.
它可以被用来设定元素的宽度：
body{ width: 400px;}或者设置文本大小：
body{ font-size: 20px;}像素还被广泛用来定位元素或设置元素间距。
像素是使用绝对值（absolute）的单位，不会被其他继承的CSS属性所影响。
像素可以被看作特殊的相对单位，即相对于显示器屏幕分辨率的单位。
百分比（Percentages）
百分比是相对单位（relative units），依赖于父元素的相关属性。
比如，块级元素 p 默认占据其所在容器的整行宽度，下面的代码将把它的宽度改变为一半。
p{ width: 50%;}百分比也可以用来设置其他CSS属性，比如文本大小，但不常用。
Em
em 是一个相对单位，它依赖于元素的字体大小。
比如，如果父元素的字体大小为 20px ，然后你给子元素设置 font-size: 0.8em ，那么这个子元素的字体大小将会是 16px。
注意不要混淆 em CSS 尺寸单位和 em CSS选择器，后者指向 <em> 强调语义的HTML元素。
相对单位的设计动机在于使得页面各元素之间保持协调而一致的视觉比例，而无须关注其绝对尺寸。比如，如果我们想让 <h1> 看起来是<body>文本的两倍，而 <h2> 为1.5倍，边栏文本要小一些为0.75倍，CSS代码编写如下：
body{ font-size: 16px;}
h1{ font-size: 2em;} /* = 32px */
h2{ font-size: 1.5em;} /* = 24px */
aside{ font-size: 0.75em;} /* = 12px */好处是，当修改参照元素的尺寸时，其他使用相对尺寸的元素都将按比例自动调整，网页内容仍然可以保持视觉平衡。
body{ font-size: 20px;}
h1{ font-size: 2em;} /* = 40px */
h2{ font-size: 1.5em;} /* = 30px */
aside{ font-size: 0.75em;} /* = 16px */如果你需要在px和em之间换算，可以试试这个在线转换工具：//pxtoem.com/
Rem
rem 单位和 em 类似，区别是后者依赖于 父元素的值，而前者依赖于文档根元素的值， 也就是 <html> 元素。
html{ font-size: 18px;}
body{ font-size: 1rem;} /* = 18px */
h1{ font-size: 2rem;} /* = 36px */
h2{ font-size: 1.5rem;} /* = 27px */如果我们设置了 html{ font-size: 18px;}：
2rem将总是固定的36px，无论把它用在哪个元素上2em将总是等于父元素字体尺寸的2倍，不一定是36px
html{ font-size: 20px;}
p{ font-size: 0.8rem;} /* = 16px */
p span{ font-size: 2em;} /* = 16px * 2 = 32px */
p strong{ font-size: 2rem;} /* = 20px * 2 = 40px */span 依赖于 p 的字体尺寸（font-size），而 strong 依赖于 html 字体尺寸。
如何选择尺寸单位？
我们的建议是首先为文档根元素和希望有确定大小的元素使用像素，然后结合百分比和em（或rem），来实现一致的视觉体验。