CSS长度单位的区别 - pt,px和cm的区别

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

  我又写了另外一个HTML例子,测试一下cm。

  在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>

  因为px能够精确地表示元素在屏幕中的位置和大小,

  我将我的显示器分别调到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是一个最基本的单位 ,就 是一个点。其它所有的单位,都和像素成一个固定的比例换算关系。所有的长度单位基于屏幕进行显示的时候,都统一先换算成为像素的多少,然后进行显示。所以,就计算机的屏幕而言 ,相对长度和绝对长度没有本质差别。任何单位其实都 是像素 ,差别只是比例不同。

  因为px能够精确地表示元素在屏幕中的位置和大小,网页主要是为了屏幕显示。

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

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

  网页主要 是为了屏幕显示,而不是为了打印等其它需要的。

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

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

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

  output device)而言的。拿pt来说,这是一个在文字排版工具 。

  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 点)
时间: 2024-08-04 09:02:30

CSS长度单位的区别 - pt,px和cm的区别的相关文章

长度单位:css 长度单位

/c/2008/11/kiy1a50ewiiggr14.aspcss 长度单位css 中,长度单位有两种,分别是绝对长度单位和相对长度单位. 绝对长度单位绝对长度单位分为 in(英寸).cm(厘米).mm(毫米).pt(磅).pc(pica).其中,in(英寸).cm(厘米).mm(毫米)和实际中常用的单位完全相同.重点介绍一下 pt(磅).pc(pica). pt(磅):是标准印刷上常用的单位,72pt 的长度为 1 英寸. pc(pica):这也是一个印刷上用的单位,1pc 的长度为 12

Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别_javascript技巧

前言 第一次听说jsonp,其实早在2年之前.当时在做一个活动页面的抽奖模块,要从服务端get一个概率,当时什么都不懂,同事说用ajax,我就用ajax,同事说dataType改成jsonp,我就改成jsonp.于是乎活动页面做完了,以后也没有碰到过jsonp,在这期间我一直以为jsonp跟ajax息息相关,是xhr的一种特殊的跨域形式...直到一个月前的一次面试,问到jsonp我被虐成狗,才决定看下jsonp,好吧,原来jsonp也不是很难. 为什么要用jsonp? 相信大家对跨域一定不陌生,

ThinkPHP中实例化对象M()和D()的区别,select和find的区别

原文:ThinkPHP中实例化对象M()和D()的区别,select和find的区别 1.ThinkPHP中实例化对象M()和D()的区别 在实例化的过程中,经常使用D方法和M方法,这两个方法的区别在于M方法实例化模型无需用户为每个数据表定义模型类,如果D方法没有找到定义的模型类,则会自动调用M方法.通俗一点说:M实例化参数是数据库的表名.D实例化的是你自己在Model文件夹下面建立的模型文件 例如:$user = new UserModel(); 等价于$user = D('user'); 如

css的em/ex/px/pt(css长度单位)使用介绍

  em:1em为当前字体font-size,一般浏览器默认为(16px); ex:以给定字体的小写字母x的高度为基准 px:像素,屏幕上的一个小方格 pt单位名称为点(Point),绝对长度单位一般老版本的table使用长度大小单位但是现在基本上没有使用

css中单位px和em的区别

px像素(pixel)相对长度单位是相对于显示器屏幕分辨率而言的(引自css教程2.0手册). em相对长度单位是相对于当前对象内文本的字体尺寸而言的,如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸(引自css2.0手册). 任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合: 1em=16px.那么12px=0.75em.10px=0.625em.为了简化font-size的换算,需要在css中的body选择器中声明font-size=62.5%,这就使em值

css pt,px区别是什么

常用的有2种:px.pt.这两个有什么区别呢? px:pixel,像素,屏幕上显示的最小单位:  pt:point,点,是印刷业一个标准的长度单位,1pt=1/72英寸:  在Windows里,默认的显示设置中,把文字定义为96dpi.这说明了:1px=1/96英寸:而1pt=1/72英寸,可以得出,在本设置中1px=0.75pt,字体9pt=12px. 但是,用户可以修改文字定义的dpi大小,例如改成144dpi,这样,1px=0.5pt,字体9pt=18px.原先用12px来组成的一个文字,

px em rem 的区别

PX特点1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 4.px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. em特点 1.em的值并不是固定的: 2.em会继承父级元素的字体大小. 3.em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸. 4.任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合:1em=1

CSS中Class与ID的区别,Margin与Padding的区别

核心提示:Class可以反复使用而ID在一个页面中仅能被使用一次.有可能在很大部分浏览器中反复使用同一个ID不会出现问题,但在标准上这绝对是错误的使用,而且很可能导致某些浏览器的现实问题. Class可以反复使用而ID在一个页面中仅能被使用一次.有可能在很大部分浏览器中反复使用同一个ID不会出现问题,但在标准上这绝对是错误的使用,而且很可能导致某些浏览器的现实问题. 这两个区别都是比较容易混淆的问题,尤其是Class与ID,相信很多人并没有仔细了解过之中区别.以下是我的一些理解: 1. Clas

CSS样式表在Firefox和IE下的区别

总结的一些CSS在FF和IE下的区别!可能不完整,以后会陆续补充. FireFox: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 FireFox: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中 FireFox: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !impo