CSS长度单位参考.docx

1、CSS长度单位参考CSS长度单位参考(教材：Web编程基础P.68)在CSS样式表中，我们经常会看到pt， px，em，ex，in等这类长度单位。它们各是什么意思，有什么区别呢？在CSS样式表中，长度单位分两种：相对长度单位，如px, em等绝对长度单位，如pt,mm等也谈px和pt的区别经常看到有人拿px和pt比较，主要是为了争辩在确定字体大小(font-size)或其它CSS属性大小时，用什么样的CSS长度单位更加好。有人说，用pt更好，因为pt是绝对长度单位，不会因为屏幕分辨率大小，或者其它因素而改变。我去做了一个测试，写了这样一个HTML例子。代码如下：CSS单位长度区别 - px和p

2、t的区别Font-size is 20ptFont-size is 20px点击浏览文件我将我的显示器分别调到1024*768和800*600的分辨率(指screen resolution)。不管是用pt还是用px设置的字体，都随着分辨率变化而变化。(我使用的浏览器是IE6，其它浏览器上尚未测试过。)我又写了另外一个HTML例子，测试一下cm(厘米)。代码如下：CSS长度单位的区别 - pt,px和cm的区别以下div宽度300pt，高度30pt： 以下div宽度300px，高度30px：以下div宽度10cm，高度3cm： 点击浏览文件结果是，cm(厘米)也是随着显示器分辨率变化而变化的。对

3、于计算机的屏幕设备而言，像素(Pixel)或者说px是一个最基本的单位，就是一个点。其它所有的单位，都和像素成一个固定的比例换算关系。所有的长度单位基于屏幕进行显示的时候，都统一先换算成为像素的多少，然后进行显示。所以，就计算机的屏幕而言，相对长度和绝对长度没有本质差别。任何单位其实都是像素，差别只是比例不同。如果把讨论扩展到其它输出设备，比如打印机，基本的长度单位可能不是像素，而是其它的和生活中的度量单位一致的单位了。CSS绝对长度单位是对于输出设备(output device)而言的。拿pt来说，这是一个在文字排版工具(word,adobe等)中非常常用的字体单位，不管你的显示器分辨率是1

4、024*768，还是800*600，同一篇文档打印在纸面上的结果是一样的。写网页用哪个长度单位更好，是px还是pt呢？我个人比较偏向px，因为px能够精确地表示元素在屏幕中的位置和大小，网页主要是为了屏幕显示，而不是为了打印等其它需要的。CSS相对长度单位(relative length unit)CSS相对长度单位中的相对二字，表明了其长度单位会随着它的参考值的变化而变化，不是固定的。以下是CSS相对长度单位列表：CSS相对长度单位说明em元素的字体高度The height of the elements font 当前字体中m字母的宽度ex字母x的高度The height of the l

5、etter x 当前字体中x字母的高度px像素Pixels%百分比PercentageCSS绝对长度单位(absolute length unit)绝对长度单位是一个固定的值。比如我们常用的有mm，就是毫米的意思。以下是CSS绝对长度单位列表：CSS绝对长度单位说明in英寸Inches (1 英寸 = 2.54 厘米)cm厘米Centimetersmm毫米Millimeterspt点Points (1点 = 1/72英寸)pc皮卡Picas (1 皮卡 = 12 点)CSS属性单位由于样式表项就是由属性及其值组成的，因此有必要了解属性值的各种单位。在CSS中，各种单位与在HTML中有所不同，请

6、读者注意区分。1、长度单位缩写 单位类型 说明cm 厘米em ems 当前字体中m字母的宽度ex exs 当前字体中x字母的高度in 英寸mm 毫米pc Picas 1 pica=12点pt 点 1点=1/72英寸px 象素 显示单位注意：并非所有浏览器都支持以上长度单位。例如：IE3.x 不支持em和ex单位。NS4.0不支持pc单位。在以上单位中，需要说明的是em和ex。“em”所代表的高度就是大写字母“M”（或者“H”）的高度，假设当前使用的字体是12号，那么此时em就是12号。一般情况下，浏览器的默认字体都是12号。如果更改了默认的字号，则em的值会相应调整。例如，假设现指定标记符中的

7、字体大小为1.5em，则浏览器在编译HTML时就会执行下列过程：(1)读取默认的字号大小值，比如12号；(2)读取相对的定义值 1.5em;(3)显示18号字体（12pt X 1.5=18pt)。可以看出，em单位是基于用户浏览器的默认值来定义的，从而使网页设计者和浏览者都具有对字体大小的控制权-设计者可以指定需要扩大（或缩小）的比例，而真正的显示尺寸则由用户自己挑选。长度单位PX/EM/PT/EM 区别及其转换公式与对照表在网页设计css中，经常用到字体，而字体大小的设置单位，常用的有2种：px、pt。这两个有什么区别呢？先搞清基本概念：px就是表示pixel，像素，是屏幕上显示数据的最基本

8、的点；而pt就是point，是印刷行业常用单位，等于1/72英寸。这样很明白，px是一个点，它不是自然界的长度单位，谁能说出一个“点”有多长多大么？可以画的很小，也可以很大。如果点很小，那画面就清晰，我们称它为“分辨率高”，反之，就是“分辨率低”。所以，“点”的大小是会“变”的，也称为“相对长度”。pt全称为point，但中文不叫“点”，查金山词霸可以看到，确切的说法是一个专用的印刷单位“磅”，大小为1/72英寸。所以它是一个自然界标准的长度单位，也称为“绝对长度”。因此就有这样的说法，在网页设计中，pixel是相对大小，而point是绝对大小。但这种说法其实还是有问题，先来看看下面的例子：文

9、字72px文字72pt文字96px从上面的字体中我们能看出72px要比72pt小一些，但96px正好和72pt一样大小 。让我们来调整电脑的设置：在桌面上右键 属性 settings Advanced General DPI setting 96 DPI。试着改变设置，设为72DPI，重启，再打开浏览器看：72px已经等同于72pt了。为什么？还是再做个实验：分别用800600和1024768看刚才的例子，明显高分辨率下，文字就变小。而且，关键的是，无论用px还是pt，都会变小。pt并没有如有些人所说，是“绝对”的，“固定”的。但如果用打印机把这页面打印出来，就可以看到：无论屏幕用什么分辨率，

10、打印出来大小都是一样的（这是当然的）。首先要分清“屏幕效果”和“打印效果”这两个概念：在浏览网页过程中，所有的“大”“小”概念，都是基于“屏幕”这个“界面”上。“屏幕”上的各种信息，包括文字、图片、表格等等，都会随屏幕的分辨率 变化而变化，一个100px宽度大小的图片，在800600分辨率下，要占屏幕宽度的1/8，但在1024768下，则只占约1/10。所以如果在定 义字体大小时，使用px作为单位，那一旦用户改变显示器分辨率从800到1024，用户实际看到的文字就要变“小”（自然长度单位），甚至会看不清，影响 浏览。那是不是用pt做单位就没这样的问题呢？错！问题同样出现。刚才的例子已经很清楚的

11、说明，在不同分辨率下，无论是px还是pt，都会改变大小 。以现在的电脑屏幕情况，还没有一种单位可以保证，在不同分辨率下，一个文字大小可以“固定不变”。因为这很难以实现也不是很有必要：全球电脑用户以亿来 数，屏幕从14寸到40寸甚至更高都有，屏幕大小不同，分辨率也不同，要保证一个字体在所有用户面前大小一样，实在是MISSION IMPOSSIBLE。另外，电脑有其自身的调节性，用户可以自己来调节：1）在浏览器中调节字体大小；2）在刚才提到的显示属性里调节。那在页面设计中到底是用px还是pt呢？我认为，这个并没有什么原则性差异，就看自己处于什么角度思考了。Mac机怎么情况不清楚，在Windows里

12、，默认的显示设置中，把文字定义为96DPI（PPI，微软都将DPI和PPI混为一体，我们也就无须较 真了）。这样的定义，说明了：1px1/96英寸。联系pt的概念，1pt1/72英寸，可以得出，在这样的设置中，1px0.75pt，常见的宋 体9pt12px。在显示器分辨率不变的基础上（比如现在常用的1024768），1px大小也就固定不变，改变显示设置，调整为144DPI，可以 得出，1px0.5pt，常见的宋体9pt18px。原先用12px来组成的一个文字，现在需要18px来组成，px多了，文字就“大”了，更易阅读 了。所以，px和pt的使用区别，只有当用户改变默认的96DPI下才会产生：使

13、用px定义文字，无论用户怎么设置，都不会改变大小；使用pt定义文字，当用户设置超过96DPI的值，数值越大，字体就越大。（附公式：px = pt * DPI / 72)对了，刚才还提到改变浏览器中文字大小的选项，也可以改变网页的文字大小。但在这种情况下，使用px和pt都是无效的，因为这2个都是有实际 “pixel”数值的单位，比如9pt是12px，大小固定。这里要引用新的单位：em，其实就是。因为当网页中的字体没有给出实际的px或pt定义的 话，会有一个默认值：12pt即16px，对应浏览器中“字体大小”中的“中等”，以这个为标准，变大或缩小。（只适用于IE，在FF中，即便定义px或 pt也都

14、可以变大变小）所以，从这个概念上看，em才是真正的“相对单位”（百分比嘛，当然是相对），而px和pt都是绝对单位（都有固定值）。在网页设计中，面向用户的屏幕的基本单位是px，因此使用px作为单位是最简单也最容易理解的，而pt也不过是通过了Windows的设置乘上了一个 比率转变成px再显示，算是绕了个圈子。参考大部分大型网站，包括Adobe和Microsoft，都是使用px作为单位，而且在html中，默认的单位 就是px，是不是也暗示着px是网页设计的“内定单位”？但的word或中，使用pt就相当方便。因为使用Word和Photoshop的主要目的都不是为了屏幕浏览，而是输出打印。当打印到实体

15、时，pt作 为一个自然长度单位就方便实用了：比如Word中普通的文档都用“宋体 9pt”，标题用“黑体 16pt”等等，无论电脑怎么设置，打印出来永远就是这么大。又或者在Photoshop中，设置一个图片中的某个艺术效果的字体是72pt大小，然后分 别将这张图片设为300DPI和72DPI，再打印出来，就可以看出，这2个字体大小完全一样，只是“清晰度”不同，300DPI更清晰。这是毫无疑问的 结果。最后整理一下所有出现过的单位：px：pixel，像素，屏幕上显示的最小单位，用于网页设计，直观方便；pt：point，是一个标准的长度单位，1pt1/72英寸，用于印刷业，非常简单易用；em：即，在

16、css中，1em100，是一个比率，结合CSS继承关系使用，具有灵活性。PPI（DPI）：pixel（dot）per inch，每英寸的像素（点）数，是一个率，表示了“清晰度”，“精度” 。现在大家知道了px，pt，em，ppi的区别，就应该更近一步去转换它了PX、PT、EM、ex和in等都是我们常用的长度单位，尤其在网页的字体大小中经常用到。但是你知道PX、PT和EM之间是如何进行准换的吗？这 里icech为大家找到了一个px、pt、em和percent大小转换的一个表格，尤其针对字体大小的转换十分方便。希望大家能够喜欢！PX和PT转换的公式：以前icech在文章中介绍过PX和PT的转换规则

17、，其实很简单，pt=px乘以3/4。比如12px3/4=9pt大小。PX和em转换的公式：对于PX转em的方法也类似，就是em=16乘以px，也就是说1.5em=1.516=24px。设计中常用PX/EM/PT/百分比转换表格PixelsEMsPercentPoints6px0.375em37.50%5pt7px0.438em43.80%5pt8px0.5em50%6pt9px0.563em56.30%7pt10px0.625em62.50%8pt11px0.688em68.80%8pt12px0.75em75%9pt13px0.813em81.30%10pt14px0.875em87.50%

18、11pt15px0.938em93.80%11pt16px1em100%12pt17px1.063em106.30%13pt18px1.125em112.50%14pt19px1.188em118.80%14pt20px1.25em125%15pt21px1.313em131.30%16pt22px1.375em137.50%17pt23px1.438em143.80%17pt24px1.5em150%18pt后记，今后的发展趋势，传统的CRT显示器将被LCD淘汰，而LCD有个特点就是分辨率固定，而不像CRT那样，一个17寸CRT可以有从640480到16001200不等，但17寸LCD只有1

19、2801024这样一个标准分辨率，也是最大分辨率，而且占满屏幕，不会像CRT那样四周留黑边，要靠人工调节。因此以后一台电脑看网页，效果可以保持相对稳定。由于技术的发展，LCD的“精度”也越来越高，先来计算一下LCD的“精度”（PPI，DPI）：15寸LCD是1024768分辨率，对角线长为15寸（英寸），根据勾股定理，很容易可以算出，屏幕宽度是11.55英寸，再用1024来除，得出15寸LCD是88.68DPI，其余的同理，看数据：15(1024*768): 88.68 DPI17(1280*1024): 96.42 DPI19(1280*1024): 86.27 DPI; 19W(1440*

20、900): 89.37 DPI20(1600*1200): 103.92 DPI; 20W(1680*1050): 99.06 DPI22W(1680*1050): 90.05 DPI24W(1920*1200): 94.34 DPI以前普通15寸CRT在800600分辨率下，大约是72DPI。让我们来算算最常用的“宋体 9pt（12px）”，在各种显示器下，实际可视大小是多少：15CRT(800*600): 12/72=0.167英寸，大约是4.2毫米，是很大很容易辨识的，这也是为什么前几年最流行的中文字体大小LCD: 15: 0.135英寸，17: 0.124英寸，19: 0.139英寸，

21、19W: 0.134英寸，20: 0.115英寸，20W: 0.121英寸，22W: 0.133英寸，24W: 0.127英寸基本上，小于0.13英寸，对于视力不太好的或者年老的用户，就会有阅读困难，小于0.12英寸，即便一般用户也会感觉吃力。所以，一般在这种情况下，要么使用16px以上的字体大小，如果还是要9pt，那就改变显示属性，间接来改变到16px以上也一样。再看看PDA上情况，Dell有款x50v，分辨率640480，屏幕大小为3.7寸，可以推算出，这个屏幕是惊人的224.70DPI，高的可怕，12px的字在里面几乎是难以辨认，因此换有另一种规格的字体来专门适合这些高分辨率的场合，同时

22、这样的字体更显得清晰圆滑，接近于传统印刷。相信不久的将来，桌面电脑系统也会如此，让我们浏览网页也能像翻阅杂志那样精美细致、赏心悦目。pt、px、DPI: 关于长度单位的误解：在印刷排版中，“point”是一个绝对的单位，它等于 1/72 英寸，可以用尺子丈量的，物理的英寸。但在 CSS 中 pt 的含义却非如此，例如我们指定一个字体是 9pt，我们会以为按照 CSS 规范，它等于:9 * 1/72 = 1/8 inch这是一个误解，因为我们的显示器被分割为了一个个的像素，单个像素只能有一种颜色 (为了简化，这里暂不讨论次像素反锯齿技术)，要在屏幕上显示，必须先把以 pt 为单位的长度转换为以像

23、素为单位的长度，这个转换的媒介，就是 DPI (事实上，这里的所谓的 DPI，是操作系统和浏览器中使用的术语，即为 PPI, pixels per inch，和扫描仪、打印机、数码相机中的 DPI 是不同的概念)。例如，无论在哪个操作系统中，Firefox 浏览器默认的 DPI 都是 96，那么实际上 9pt = 9 * 1/72 * 96 = 12px。所以，虽然“DPI”中的“I”和“1pt 等于 1/72 inch”中的“inch”，都不代表物理上的英寸，但这两个单位互相之间是相等的，也就在相乘中约掉了。那么，真实的物理长度怎么计算呢?请拿出一把尺子，丈量你的显示器的可见宽度 (我这里是

24、 11.2992 英寸)，除以横向分辨率 (我这里是 1024 像素)，得到的就是每个像素的物理长度。现在我们可以回答这样一个问题，网页上 9pt 的字体究竟占用了多宽的空间?答案是:9 * 1/72 * 96 * 11.2992 / 1024 = 0.1324 英寸 = 0.3363 厘米。有兴趣的朋友可以自己查证一下。而关键字的中left top就是0% center 就是50% right bottom就是100%，那百分比是怎样算的呢？假如是 background-position:50% 0 的话，就是容器的左上角开始的坐标(50%,0) 和背景图的左上角开始的坐标(50%,0)的位

25、置同点处，但这样的说法好像比较不好计算。或者换个说法比较容易理解： 容器的宽减去背景图的宽，再乘 50% ，高的计算也一样。比如 容器宽 1000px 背景图宽 800px：如果background-positionX 是50%时，就是 ( 1000px - 800px ) * 50% = 100px；如果background-positionX 是-50%时，就是 (1000px - 800px ) *-50% = -100px。又比如 容器宽 600px 背景图宽 800px ：如果background-positionX 是 50% 时，就是 ( 600px - 800px ) * 50

26、% = -100px；如果background-positionX 是 -50% 时，就是 (600px - 800px ) *-50% = 100px 。最后一种就会出现就算是使用负的百分比也让容器的背景图左边为空或者出现背景色，百分比真是奇妙！因为屏幕能显示的最小单位是1px，对于像773*50%=386.5这样带数字的长度必须有所取舍。IE：按四舍五入的方式计算。Firefox：计算后的值忽略小数部分.CSS的优先级1、标有!important的规则有最高优先级一个样式规则可以有一个important附带标签，表示该样式规则具有最高优先级。例如下面例子中，前景色被标为important。

27、H1color:black !importan; font-family:sans-serif注意：这种声明容易引起混乱，因此通常使用得较少。2、创作者规则优先级高于浏览者规则浏览器允许浏览者创建样式规则以覆盖系统缺省值。在此情况下，由网页创作者明确设定得样式优先级较高，而浏览者设置得样式规则优先级较低。3、更特殊得规则优先于不够特殊的规则在决定特殊性时，selector中的ID属性有最高优先级。基于ID selector的优先级可通过计数Selector中类属性的数量确定，数量越多优先级越高。假如规则仍然无法确定优先级，则HTML元素名的数量决定了特殊性。4、在同一个级别的情况下，最后指定的

28、规则有优先权假如两个或更多的规定在应用了前三个规定具有相同优先级，则后给出的规则优先于早先给出的规则。如果在网页的HEAD标记中同时使用了STYLE标记符（指定嵌入式样式）和LINK标记符（指定链接式样式），并且这两个样式指定中同时应用了具有同一优先级别的样式，则STYLE标记符和LINK标记符的先后顺序将决定样式的优先级。例如，如果在LINK所链接的样式表（mycss.css）中定义了以下一条样式规则：H1color:red同时在嵌入式样式定义中也定义了一条规则：H1color:yellow在网页中的样式定义如下所示：由于STYLE标记符中定义的样式后出现，因此它具有更高的优先级，所以网页中H1标记符的内容将显示为黄色（yellow)。同样，如果将Link标记符的位置移动到标记符之后，则网页中H1标记符的内容将显示为红色（red)。另外，由于直插式样式（使用HTNL标记的style属性设置的样式）的位置最接近于样式作用的标记符，因此它通常具有高优先级。