CSS中有很多属性可以接受长度值，比如：width、height、margin、padding、border-width、font-size、text-shadow。因为使用场景很多，所以CSS也提供了很多长度单位。有些是日常生活中使用的单位，如：厘米（cm）和英寸（in）；有些是印刷业使用的单位，例如：点（pt）和派卡（pc）；有些是专门为CSS单位发明的，例如：px。使用场景那么这些属性和单元是如何协同工作的呢？某些属性是否需要特定单位？事实上，情况并非如此。单位与属性无关。任何单位都适用于同一属性。何时使用哪个单元没有限制。如果该属性接受以像素为单位的值（例如：边距：5px），那么它也可以接受以英寸或厘米为单位的值（边距：1.2in；边距：0.5cm），反之亦然。虽然单位与属性无关，但与输出介质有一定的关系，比如输出是在屏幕上还是在纸上。在屏幕上显示和在纸上打印的推荐单位不同。下表为推荐用法：输出介质推荐偶尔使用不推荐屏幕em,px,%expt,cm,mm,in,pcprintingem,cm,mm,in,pt,pc,%px,ex除了Inrelation对于输出介质，这些单位从长度值的计算方法上可以分为绝对单位和相对单位。绝对单位绝对单位（px、cm、mm、in、Q、pt、pc）是指这个单位的长度值等于它所代表的物理长度。例如，width:1cm等于现实世界中的1cm长度，这也意味着绝对单位在所有媒体上的显示都是一致的。但这是一个理想的情况。由于不同浏览器的显示器和CSS实现的差异，绝对单位在许多设备上显示不准确。因为px和in的关系是1in=96px，在低分辨率设备上，1px就是1个像素（pixel，这也是px名字的由来）的长度，低分辨率屏幕上的1px往往大于1/96in，所以从px算出来的其他所有绝对单位值都是不准确的。在高分辨率设备（例如今天的高清屏幕和打印机）上，绝对单位显示得更准确。由于以上原因，印刷中更多地使用绝对单位。曾几何时，CSS需要绝对单位才能在计算机屏幕上正确显示。然而，CSS在2011年放弃了这一要求，因为大多数制造商无法满足这一要求。目前，绝对单位只能在打印和高分辨率设备上正常工作。CSS没有明确定义“高分辨率”的含义。然而，由于目前低端打印机每英寸有300点，而高端屏幕有200dpi，所谓的“高分辨率”可能介于两者之间。.下面贴出绝对单位的直接换算公式：1in=2.54cm=25.4mm=72pt=6pc=96px作为CSS中最常用的单位，px有必要多说几句。px的特点可以概括为：在低分辨率设备上，1px=1像素；在高分辨率设备上，1px=1/96in，1px不一定等于1个像素（例如4.7英寸iphone上1px=2个像素）；对于图像显示，1px=1个图像像素，例如：一张600x400分辨率照片的CSS宽高分别为600px和400px（1200x800像素用于在4.7英寸iphone上显示）；relativeunitsmean长度值是根据其他长度计算得出的。相对单位又可以分为font-based和viewport-based：FontBasedem,ex先说em和ex。Em表示元素的当前字体大小。如果元素的font-size为2cm，则1em表示2cm。em可以用来控制大小，比如margin:1em;文本缩进：1.5em。这时候这些尺寸是和元素的字体大小相关的，所以在大屏幕（更大的字体）和小屏幕（更小的字体）会按比例缩放，所以em可以用于响应式设计。如果将em直接用于font-size属性，如font-size:2em，则em表示父元素的字体大小。ex很少使用，ex的大小与字体的x-height有关。x高度大致等于字体中小写字母（例如a、c、m或o）的高度。font-size相同的不同字体的x-height可能相差很大，所以使用ex的效果存在很大的不确定性。remCSS在2013年创建了一个新的单位rem，rem表示根元素（html元素）的字体大小。em可能每个元素不一样，但是rem是一致的。因为这个特性，rem现在在响应式设计中的应用更加广泛。chch使用的表格较少，是CSS3中新加入的单位，表示当前字体中“0”（零，unicode字符U+0030）的宽度。基于视口的vw、wh、vmin、vmax都是CSS3中新加入的单位。vw、vh可以根据窗口大小调整字体大小。vw是视口宽度的1/100，vh是视口高度的1/100。另外还有vmin，指的是vw和vh之间较小的一个，vmax则相反。大多数当前浏览器都支持这些单位。
