css值和单位

数字

CSS中有两类数字：整数和实数。这些数字类型主要作为其他值类型的基础，不过在某些情况下，这些基本类型数字也可以用作属性的值。

百分数

百分数值是一个计算得出的实数，其后跟有一个百分号。百分数值几乎总是相对于另一个值，这个值可以是任意的。

长度单位

很多CSS属性都依赖于长度度量来合适的显示各种页面元素。所有长度单位都可以表示为整数或者负数，其后跟有一个标签（不过有些属性只能接受整数）。另外还可以使用实数，也就是有小数部分的数。所有长度单位可以分为两类：绝对长度单位和相对长度单位

绝对长度单位

英寸(in)

厘米(cm)

毫米(mm)

点(pt)

点是一个标准印刷度量单位。

派卡(pc)

派卡也是一种印刷术语

像素

如果一个显示器的分辨率设置为1024像素*768像素，其屏幕大小为14.22英寸宽、10.67英寸高，而且现实区完全覆盖整个屏幕，那么每个像素的宽和高都为1英寸的1/72（即14.22/1024和10.67/768）所以实际像素(ppi)都高于72，有时还会更高，达到120ppi。

相对长度单位

相对长度单位之所以得名，是因为他们是根据与其他事物的关系来度量的。所度量的实际距离可能因为不在其控制之下的其他因素而改变，如分辨率、可视区的宽度、用户的首选项设置，以及其他的很多方面，另外，对于某些相对单位，其大小几乎总是对应于使用该单位的元素，因此会因元素的不同而不同

一个共有3个相对单位：em、ex和px（其实还有rem）。前两个单位代表‘em-height’和’x-height’，这是常用的印刷度量单位；最后一种长度单位是px，这代表‘像素’。一个像素就是计算机显示器上看到的一个点。这个值被定义为相对单位，因为他取决于显示器设备的分辨率。

em和ex单位

em定义为一种给定字体的font-size值，如果一个元素的font-size为14像素，那么对于该元素，1em就是等于14像素
例如，假设一个h1的字体大小为24像素，一个h2元素的字体大小为18像素，还有一个段落的字体大小为12像素，如果将所有者3个元素的左边距都设置为1em，那么他们的左边距就分别为24像素、18像素和12像素：
ex是指所用字体中小写x的高度，因此如果有两个段落，其中文本的大小为24点，但是各种使用了不同的字体，那么各段相应的ex值可能不同。这是因为，不同字体的x的高度可能不同。

像素长度

从表面看，像素很直接。如果仔细地查看每个显示器，你会看到，它被划分为由一个个小框组成的网格。每个框就是一个像素。如果将一个元素的高和宽定义为某个像素值那么这个元素的宽和高就会由相应多个元素组成。
遗憾的是，使用像素有一个潜在的缺点。如果按像素设置字体大小，那么Window（IE7以前）的用户无法使用浏览器中的‘文本大小’菜单调整字体的大小。如果文本大小太小，用户无法很好的阅读，这可能存在问题。如果使用灵活的度量，如em，用户就能调整文本的大小。
另外一个方面，非常适合用像素来度量图像大小，因为图像的高度和宽度本身就是像素值。实际上，只有一种情况下你可能不想用像素来表示图片大小，那就是你希望图像能岁文本大小缩放时。

像素理论

那么为什么响度定义为相对长度单位呢？这个我已经解释过，显示器上的小色框是像素。不过，多少个这样的色框等于一英寸呢？这个问题看上去可能不合逻辑，不过蓉我来解释。
在讨论像素时，CSS规范建议如果一个显示类型的设置与96ppi截然不同，用户代理应把像素度量缩放为一种参考像素。css2建议将90ppi作为参考像素，不过css2.1建议采用96ppi，这是windows机器常用的度量，而且也被诸如safari等现代流量器所采纳。

总结

针对上述问题，做最好的度量可能是相对度量，特别是em，如果合适也可以使用px。在大多数流量器中，由于ex实际上是em的一部分，所以目前来说ex还不太游泳。如果更多的用户代理支持实际的x高度度量，ex可能就会有用武之地。总的来说，em是最灵活的，因为他随字体大小缩放，所以元素和元素操作都能更为一致。

本文是本人阅读CSS权威指南做下的笔记，属于个人原创，如果有意转载，请加上原文链接。谢谢。

                                                关耳。