欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

CSS中的单位_html/css_WEB-ITnose

程序员文章站 2022-04-26 09:56:26
...
一、长度单位

  CSS中,长度单位有两种,分别是绝对长度单位和相对长度单位。

  绝对长度单位

  绝对长度单位分为in(英寸)、cm(厘米)、mm(毫米)、pt(磅)、pc(pica)。其中,in(英寸)、cm(厘米)、mm(毫米)和实际中常用的单位完全相同。重点介绍一下pt(磅)、pc(pica)。

  pt(磅):是标准印刷上常用的单位,72pt的长度为1英寸。
  pc(pica):这也是一个印刷上用的单位,1pc的长度为12磅。

  绝对长度单位,虽然理解起来很容易,但是在网页的设计中很少用到。

  相对长度单位

  相对长度单位是使用最多的长度单位。包括em、ex、px,下面分别介绍一下。

  em是定义文字大小的值,也就是文本中font-size属性的值。例如:定义某个元素的文字大小为12pt,那么,对于这个元素来说1em就是12pt。单位em的实际大小是受到字体尺寸的影响的。

  ex和em类似,指的是文本中字母x的高度,因为不同的字体的x的高度是不同的,所以ex的实际大小,受到字体和字体尺寸两个因素的影响。

  px就是通常所说的像素,使网页设计中使用最多的长度单位。将显示器分成非常细小的方格,每个方格就是一个像素。表面上看好像很容易理解,实际上,px的具体大小是受到屏幕的分辨率影响的,也就是和划分屏幕各自的方式有关。例如,同样是100px大小的字体,如果显示器使用800×600像素的分辨率,那么,每个字的宽度是屏幕的1/8。若将显示器的分辨率设置为1024×768像素,那么同样是100px字体的字,其宽度就越为屏幕宽度的1/10。

优缺点:

px:基于像素的单位.像素是一种有用的单位,因为在任何媒体上都可以保证一个像素的差别确实是可见的.

em :一般用来测量长度的通用单位(例如元素周转的页边空白和填充),当用于指定字体大小时,em单位是指父元素的字体大小.
比如


这里的字是24px

如果使用em来指定填充,填充的宽度是相对于DIV元素的字体大小而定的.

pt是印刷业上常使用的单位,磅的意思.一般也用于页面打印排版.

以上三种PX是像素单位,EM是相对单位,PT是绝对单位.他们各自的好处是,PX可以在计算机屏幕上,能达到预期的效果,在打印机和其它的高分辨率设备上,它又能取得所希望的效果.
EM的优点很多,比如在一个页面上,你给定了一个父元素的字体大小,这样就可以通过调整一个元素来成比例的改变所有元素大小.它可以*缩放,比如用来制作可伸缩的样式表.
PT是一种固定长度的度量单位,是能够使用测量设备测得的长度.绝对单位作用有限,因为它们不能够缩放,通常只用在已经知道 是用在那种输出媒体的情况下才使用.但大多数情况下最好使用相对单位.
所以应该没有最好的吧,一般都是用PX和EM这种配搭比较好.全部手打,非复制地!!!

建议:

平时都是用px来定义字体,所以无法用浏览器字体放大的功能,而国外大多数网站都可以在IE下使用。因为

1、IE无法调整那些使用px作为单位的字体大小;

2、国外的大部分网站能够调整的原因在于其使用了em作为字体单位;

3、Firefox能够调整px和em,但是96%以上的中国网民使用IE浏览器(或内核)。

px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

em有如下特点:

1、em的值并不是固定的;

2、em会继承父级元素的字体大小。

所以我们在写CSS的时候,需要注意两点:

1、body选择器中声明Font-size=62.5%;

2、将你的原来的px数值除以10,然后换上em作为单位;

3、重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。

但是12px汉字例外,就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小,而是稍大一点。这个问题 Jorux已经解决,只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时,对于浮点的取值精确度有限。不知道有没有其他的解释。

相关标签: CSS中的单位