css长度单位

昨天晚上一个同学跟我聊天，问我px和cm如何转化？
他要做打印，用尺子测量了打印纸的大小，之后在转换成px做表格。
虽然我经常做css，但是对长度也不是特别有研究，一般情况下我总是用px。
现在把网上搜索的信息总结一下：
************************************************************
在CSS样式表中，长度单位分两种：
相对长度单位，如px, em等
绝对长度单位，如pt,mm等
************************************************************　　
第一个例子：比较px和pt的区别　
<p style = "font-size:20pt;">Font-size is 20pt</p>　　
<p style = "font-size:20px;">Font-size is 20px</p >
因为px能够精确地表示元素在屏幕中的位置和大小，
将显示器分别调到1024*768和800*600的分辨率(指screen resolution)。
不管是用pt还 是用px设置的字体，都随着分辨率变化而变化 。
(我使用的浏览器是IE6，其它浏览器上尚未测试过。)
所有的长度单位基于屏幕进行显示的时候 ，都统一先换算成为像素的多少。
************************************************************
第二个例子：测试一下cm　
以下div宽度300pt，高度30pt： <br>　
<div style = "width:300pt;height:30pt;border:1px solid blue;"></div>
以下div宽度300px，高度30px ：<br>　
<div style = "width:300px;height:30px;border:1px solid blue;"></div>　　
以下div宽度10cm，高度3cm ： <br>　　
<div style = "width:10cm;height:3cm;border:1px solid blue;"></div>
结果是，cm(厘米)也是随着显示器分辨率变化而变化的。
对于计算机的屏幕设备而言，像素 (Pixel )或者说px是一个最基本的单位 ，就 是一个点。
其它所有的单位，都和像素成一个固定的比例换算关系。
所有的长度单位基于屏幕进行显示的时候，都统一先换算成为像素的多少，然后进行显示。
所以，就计算机的屏幕而言 ，相对长度和绝对长度没有本质差别。
任何单位其实都 是像素 ，差别只是比例不同。
因为px能够精确地表示元素在屏幕中的位置和大小，网页主要是为了屏幕显示。
如果把讨论扩展到其它输出设备，比如打印机，基本的长度单位可能不是像素，而是其它的和生活中的度量单位一致的单位了。
************************************************************
CSS绝对长度单位 是对于输出设备(output device)而言的。
拿pt来说，这是一个在文字排版工具(w ord,adobe等)中非常常用的字体单位，不管你的显示器分辨率是1024*768，还是800*600，同一篇文档打印 在纸面上的结果是一样的。
网页主要 是为了屏幕显示，而不是为了打印等其它需要的。
写网页用哪个长度单位更好，是px还是pt呢？
我个人比较偏向px，因为px能够精确地表示元素在屏幕中的位置和大小，网页主要是为了屏幕显示，而 不是为了打印等其它需要的。
*********************************************************
CSS相对长度单位中的相对二字，表明了其长度单位会随着它的参考值的变化而变化，不是固定的。
以下是CSS相对长度单位列表：
CSS相对长度单位 说明
em 元素的字体高度The height of the element's font
ex 字母x的高度The height of the letter "x "
px 像素Pixels
% 百分比Percentage
em有如下特点：
1. em的值并不是固定的；
2. em会继承父级元素的字体大小。
**************************************************************
CSS绝对长度单位(absolute length unit)
绝对长度单位是一个固定的值。比如 我们常用的有mm，就 是毫米的意思。
以下是CSS绝对长度单位列表：
CSS绝对长度单位 说明
in 英寸Inches (1 英寸 = 2 .54 厘米 )
cm 厘米Centimeters
mm 毫米Millimeters
pt 点Points (1点 = 1/72英寸)
pc 皮卡Picas (1 皮卡 = 12 点)
*************************************************************
长度单位优化方法：
1. body选择器中声明Font-size=62.5%；
2. 将你的原来的px数值除以10，然后换上em作为单位；
简单吧，如果只需要以上两步就能解决问题的话，可能就没人用px了。
经过以上两步，你会发现你的网站字体大得出乎想象。
因为em的值不固定，又会继承父级元素的大小，你可能会在content这个div里把字体大小设为1.2em, 也就是12px。
然后你又把选择器p的字体大小也设为1.2em，但如果p属于content的子级的话，p的字体大小就不是12px，而是1.2em=1.2 * 12px=14.4px。这是因为content的字体大小被设为1.2em，这个em值继承其父级元素body的大小，也就是16px * 62.5% * 1.2=12px, 而p作为其子级，em则继承content的字体高，也就是12px。
所以p的1.2em就不再是12px，而是14.4px。
3. 重新计算那些被放大的字体的em数值。
避免字体大小的重复声明，也就是避免以上提到的1.2 * 1.2= 1.44的现象。
比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。
4.以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小，而是稍大一点。
解决方法：只需在body选择器中把62.5%换成63%就能正常显示了。

今天怎么啦，大家都忙什么去了，我出来支持一下~





















仙遁斗罗大陆

不错，研究得深入！