SEO中国站 | SEO有问必答      SEO中国站专注为企业提供搜索引擎优化(SEO)服务,中国SEO服务诚信高效品牌      关于我们 | 客户服务 | 联系方式 | 加入收藏 | RSS订阅
SEO中国站专业为中小型企业提供SEO服务搜索引擎优化中国SEO在线诚信服务平台,如需更多咨询和交流,请点击客户服务中心交谈!
域名主机 网络安全 网站运营HTML/DIV+CSS ASP/ASP.NET PHP编程 Access/Mysql
返回首页
当前位置: 首页 > 网站建设 > HTML/DIV+CSS >

CSS长度单位参考

时间:2010-03-08 17:01来源:SEO中国站 作者:seocnz 点击:
在CSS样式表中,我们经常会看到pt, px,em,ex,in等这类长度单位。它们各是什么意思,有什么区别呢? SEO中国站 分析如下。 在CSS样式表中,长度单位分两种: 相对长度单位,如px, em等 绝对长度单位,如pt,mm等 也谈px和pt的区别 经常看到有人拿px和pt比
  

       在CSS样式表中,我们经常会看到pt, px,em,ex,in等这类长度单位。它们各是什么意思,有什么区别呢?SEO中国站分析如下。

 

       在CSS样式表中,长度单位分两种:相对长度单位,如px, em等   绝对长度单位,如pt,mm等

 

也谈px和pt的区别

经常看到有人拿px和pt比较,主要是为了争辩在确定字体大小(font-size)或其它CSS属性大小时,用什么样的CSS长度单位更加好。有人说,用pt更好,因为pt是绝对长度单位,不会因为屏幕分辨率大小,或者其它因素而改变。

我去做了一个测试,写了这样一个HTML例子。代码如下:

<html>
<head><title>CSS单位长度区别 - px和pt的区别</title></head>
<body >
<p style = "font-size:20pt;">Font-size is 20pt</p>
<p style = "font-size:20px;">Font-size is 20px</p>
</body>
</html>

 

我将我的显示器分别调到1024*768和800*600的分辨率(指screen resolution)。不管是用pt还是用px设置的字体,都随着分辨率变化而变化。(我使用的浏览器是IE6,其它浏览器上尚未测试过。)

我又写了另外一个HTML例子,测试一下cm(厘米)。代码如下:

<html>
<head><title>CSS长度单位的区别 - pt,px和cm的区别</title></head>
<body >
以下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>
</body>
</html>

 

结果是,cm(厘米)也是随着显示器分辨率变化而变化的。

对于计算机的屏幕设备而言,像素(Pixel)或者说px是一个最基本的单位,就是一个点。其它所有的单位,都和像素成一个固定的比例换算关系。所有的长度单位基于屏幕进行显示的时候,都统一先换算成为像素的多少,然后进行显示。所以,就计算机的屏幕而言,相对长度和绝对长度没有本质差别。任何单位其实都是像素,差别只是比例不同。

如果把讨论扩展到其它输出设备,比如打印机,基本的长度单位可能不是像素,而是其它的和生活中的度量单位一致的单位了。

CSS绝对长度单位是对于输出设备(output device)而言的。拿pt来说,这是一个在文字排版工具(word,adobe等)中非常常用的字体单位,不管你的显示器分辨率是1024*768,还是800*600,同一篇文档打印在纸面上的结果是一样的。

写网页用哪个长度单位更好,是px还是pt呢?

我个人比较偏向px,因为px能够精确地表示元素在屏幕中的位置和大小,网页主要是为了屏幕显示,而不是为了打印等其它需要的。

 

CSS相对长度单位(relative length unit)

CSS相对长度单位中的相对二字,表明了其长度单位会随着它的参考值的变化而变化,不是固定的。

以下是CSS相对长度单位列表:

CSS相对长度单位 说明
em 元素的字体高度The height of the element's font
ex 字母x的高度The height of the letter "x"
px 像素Pixels
% 百分比Percentage

 

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 点)

 

 

文章出处:www.seocnz.com
SEO中国站专注企业SEO服务SEO优化,中国SEO诚信服务品牌。
本文seocnz保留所有,转载请以连接形式注明出处。


------分隔线----------------------------

------分隔线----------------------------
发表评论
请自觉遵守互联网相关政策法规,作者管理后台可以删除恶意评论、广告和违禁词语。。
验证码:点击我更换图片
推荐内容
  • CSS长度单位参考

    在CSS样式表中,我们经常会看到pt, px,em,ex,in等这类长度单位。它们各是什么意思...

  • CSS属性参考

    SEO 中国站所知,该CSS属性参考是根据W3C的CSS2标准的属性参考说明和微软的CSS属性参...

  • CSS伪类(pseudo-class)

    和一般的CSS语法不同(参见 SEO中国站 CSS语法),CSS伪类的语法有两种。 第一种: sele...

  • CSS列表属性(list-style)

    列表样式类型属性(list-style-type) 这个属性用来设定列表项标记(list-item marker)的...

  • CSS盒子模式(Box Model)

    SEO 中国站详细介绍下,什么是盒子模式,在CSS 中有个重要的概念,就是盒子模式 (Box ...

  • CSS间隙属性(padding)

    间隙属性(padding)是用来设置元素内容到元素边界的距离。 左间隙属性(padding-left) ...

SEO服务