无忧技术网 - RSS订阅 
无忧技术网

CSS中的长度单位


作者:[佚名] - 发布:2010-4-22 17:35:38 - 来源:无忧技术网

    长度单位是Web页设计中最常用的一个单位。一个排列无序、杂乱无章的页面不可能给人们留下什么好的印象。于是,在设计的时候需要为元素的位置、尺寸精确地定义一些值,以使其达到预期的效果。

   CSS给予人们精确控制网页的能力,这一点为人们津津乐道。它允许人们定义外观、尺寸、空间及其他的样式。但是,CSS所给出的控制同时也是一个危险的东西,这不仅表现在对于CSS的使用,设计者缺乏经验,更在于如何给出一个合适的尺寸和空间值。为什么呢?因为一个设计者虽然能够确定某一个特殊的屏幕分辨率,但是不可能确定别人的大脑和别人的视力或者那些富有个性的自定义设置。

    CSS的主要功能之一就是CSS定位,这个定位的概念既包括位置的定位,也包括尺寸的定位。无论哪一种,都需要使用长度单位,不然,精确定位就无从谈起。

    在CSS中,长度是一种度量尺寸,用于宽度、高度、字号、字和字母间距、文本的缩排、行高、页边距、贴边、边框线宽以及许许多多的其他属性。长度单位一般是一个由两个字母组成的单位缩写,例如cm,pt,em等。

1.绝对长度单位

    网页定义上常常使用的绝对长度值有厘米(cm)、毫米(mm)、英寸(in)、点(pt)、派卡(pc)等等。

单位--英寸(in)--厘米(cm)----毫米(mm)---磅(pt)-----派卡(pc) 
英寸-- 1.0 ----- 2.54 ------ 25.4 ----- 72 ------- 6 
派卡-- 0.16667 - 0.4233 ---- 4.233 ---- 12 ------- 1.0 
厘米-- 0.3937 -- 1 --------- 10 ------- 28.3464 -- 4.7244 
毫米-- 0.03937 - 0.1 ------- 1.0 ------ 2.83464 -- 0.47244 
磅  -- 0.01389 - 0.0352806 - 0.352806 - 1.0 ------ 0.83333   

绝对长度值的使用范围比较有限,只有在完全知道外部输出设备的具体情况下,才使用绝对长度值。也就是说,绝对长度值最好用于打印机输出设备,而在仅仅作为屏幕显示时,使用绝对长度值意义不大,应该尽量使用相对长度值。

2.相对长度值

    每一个浏览器都有其自己默认的通用尺寸标准,这个标准可以由系统决定,也可以由用户按照自己的爱好进行设置。因此,这个默认值尺寸往往是用户觉得最适合的尺寸。于是使用相对长度值,就可以使需要定义尺寸的元素按照默认大小为标准,相应地按比例缩放。这样就不可能产生难以辨认的情况。其实,百分比单位以及关键字都能产生相类似的效果。

CSS还支持下列三种长度的相对单位:em(当前字体中字母M的宽度)、ex(当前字体中字母X的高度)、px(一个象素的大小)。

使用em和ex的目的就是为所给的字体设置合适的宽度,而没有必要知道字体有多大,在显示时,可通过比较当前字体中的M和X来确定。字体越大,所对应的em和ex也就越大。
 
以象素为单位的长度是相对于显示器上的象素(或许为方形)的高度和宽度。影像的宽度和高度经常是以象素给出的。譬如,WONDOWS的用户所使用的分辨率一般是96像素/英寸,而MAC的用户所使用的分辨率一般是72像素/英寸。象素测量法通常不是个好方法。首先,象素的大小依分辩率变化较大,大多数用户都会将显示器设置成尽可能高的分辩率,从而导致象素太小,而无法阅读。
 
    3、百分比单位

百分比总是相对于另一个值来说的。那个值可以是长度单位或是其他的。每一个可以使用百分比值单位指定的属性同时也自定义了这个百分比值的参照值。大多数情况下,这个参照值是此元素本身的字体大小

责任编辑:liqwei
打印本页】【关闭本页】【返回列表
·上一篇:javascript 内置函数
·下一篇:CSS在IE和Nascape的显示差别
 文章评分
  • current rating
-5 -4 -3 -2 -1 0 +1 +2 +3 +4 +5
 相关文章
·[JS/CSS/HTML]几款CSS在线工具推荐 (2010-08-21)
·[JS/CSS/HTML]CSS查找BUG的10个顺口溜 (2010-08-21)
·[JS/CSS/HTML]CSS在IE与Firefox下的兼容性 (2010-04-22)
·[JS/CSS/HTML]CSS在IE和Nascape的显示差别 (2010-04-22)
 相关评论
 站点最新文章 更多>> 
·[经典影音]弱点
·[经典影音]萨利机长
·[经典影音]天空之眼
·[管理知识]康奈尔笔记法,提高100%学习效率
·[管理知识]刘强东:我管75000人靠这4张表格
·[管理知识]跟壳牌学HSE管理
·[运营策划]编辑工作内容整理
·[至理名言]奋斗与决定
·[瀚海拾遗]盲人打灯笼之各家论道
·[搞笑段子]中国男足
 站点浏览最多 更多>> 
·[协议规范]http断点续传原理:http头 Range、…
·[JS/CSS/HTML]HTML 空格的表示符号 nbsp / en…
·[NoSQL]Mongo数据库简介
·[协议规范]什么是SPF记录?如何设置、检测SP…
·[协议规范]图解 HTTPS 通信过程
·[PHP]精选国外免费PHP空间推荐
·[程序综合]常用IP地址查询接口
·[程序综合]什么是 DNS Prefetch ?
·[程序综合]获取客户端IP地址的三个HTTP请求…
·[Linux]/usr 目录的由来