后使用快捷导航没有帐号？
查看: 1384|回复: 6
CSS中px和em的区别
本帖最后由 antzone 于
01:17 编辑
CSS中px、pt和em的区别:
建议:尽可能的手写代码，可以有效的提高学习效率和深度。
在国内的大多数站点中，都是使用px作为设置字体大小单位，所以国内网页设计者也绝大多数习惯于使用px作为单位。而国外则基本使用em作为单位。下面就分别对它们进行一一介绍。
px（像素）是pixel简写。px并不是一个真真切切的物理长度，比如对于同一个显示器，的分辨下和800x600分辨率下同等像素大小的文字，看起来大小也是不同的，再比如一个同样的分辨率，一个大型的LED广告牌和一个普通显示器上的同等像素的文字大小也是不同的，所以px是个相对单位长度。在一般情况下，浏览器的默认字体大小是16px。
em是相对单位长度，它并没有固定的值，它的大小是由当前对象内文本字体大小决定的。例如，在默认情况下浏览器的默认字体大小是16px，在没有其他设置的情况下，1em=16px。
[HTML] 纯文本查看 复制代码运行代码
&!DOCTYPE html&
&meta charset=& utf-8&&
&meta name=&author& content=&/& /&
&title&蚂蚁部落&/title&
&style type=&text/css&&
ul li{list-style-type: }
.em{font-size:2}
.px{font-size:32 }
&&&li class=&em&&我的大小是2em&/li&
&&&li class=&px&&我的大小是32px&/li&
以上代码中，由于没有进行特别的字体设置，所以&我的大小是2em&的字体大小就继承了浏览器的默认设置，即1em=16px，那么2em也就等于32px。下面就看一个不是默认16px的情况，代码如下:
[HTML] 纯文本查看 复制代码运行代码
&!DOCTYPE html&
&meta charset=& utf-8&&
&meta name=&author& content=&/& /&
&title&蚂蚁部落&/title&
&style type=&text/css&&
ul li{list-style-type: }
.first{font-size:12}
.em{font-size:2}
.px{font-size:32}
.test{font-size:24}
&div class=&first&&
&&&span class=&em&&我的字体大小是2em&/span&
&&&span class=&px&&我的字体大小是32px&/span&
&&&span class=&test&&我的字体大小是24px&/span&
以上代码中由于设置了类名为first的div中的字体大小为12px，那么在此div之内的1em就等于12px。而第二个div依然是使用默认的字体大小16px。第三个div内的span中的字体大小设置为24px。
三.px和em之间的换算:
如果说网页使用px作为单位，那就不用换算，当我们需要使用em作为单位的时候，为了便于计算和书写，一般要进行一下换算。
在没有调整的浏览器下字体的高度都是16px，那么1em就等于16px。当我们要将字体大小设置为12px的时候就需要类似这样的代码:[CSS] 纯文本查看 复制代码div{
& & font-size:0.75em
如果再要设置一个13px大小的字体，还需要比较麻烦的计算。那么我们就将body的字体大小设置为10px，那么在body中1em就等于10px，13px也就等于1.3em。这是不是就方便不少了。
[HTML] 纯文本查看 复制代码运行代码
&!DOCTYPE html&
&meta charset=& utf-8&&
&meta name=&author& content=&/& /&
&title&蚂蚁部落&/title&
&style type=&text/css&&
body{font-size:62.5%;}
.em{font-size:1.5}
.px{font-size:15 }
&&&div class=&em&&我的大小是1.5em&/div&
&&&div class=&px&&我的大小是15px&/div&
以上代码中font-size：62.5%将会把body中的字体设置为10px。
呵呵，不过，支持一下，原来一直以为那个px和em换算数值是固定额，原来只是一个相对值，根据对象的字体大小换算啊，非常受教
他们两个都是相对值，学习了
他们两个都是相对值，学习了
又来了一个志同道合者吗
又来了一个志同道合者吗
是啊一起学习一起进步嘿嘿
是啊一起学习一起进步嘿嘿
我是初学者，绝对菜鸟，还没有毕业超级菜鸟
我是初学者，绝对菜鸟，还没有毕业超级菜鸟
我工作一年多了，最新闲来无事想把基础的东西整理下，温故而知新
Powered by
Copyright &o &nbsp,&nbsp&nbsp,&nbsp&nbsp,&nbsp&nbsp,&nbsp
在CSS中，W3C文档把尺寸单位划为为两类：相对长度单位和绝对长度单位。
然而相对长度单位按照不同的参考元素，又可以分为字体相对单位和视窗相对单位。字体相对单位有：em、ex、ch、rem；视窗相对单位则包含：vw、vh、vmin、vmax几种。
绝对定位则是固定尺寸，它们采用的是物理度量单位：cm、mm、in、px、pt以及pc。
但在实际应用中，我们使用最广泛的则是em、rem、px以及百分比（%）来度量页面元素的尺寸。
关于伯乐头条
专注于IT互联网，分享业界最新动态。
新浪微博：
推荐微信号
（加好友请注明来意）
- 好的话题、有启发的回复、值得信赖的圈子
- 分享和发现有价值的内容与观点
- 为IT单身男女服务的征婚传播平台
- 优秀的工具资源导航
- 翻译传播优秀的外文文章
- 国内外的精选博客文章
- UI,网页，交互和用户体验
- 专注iOS技术分享
- 专注Android技术分享
- JavaScript, HTML5, CSS
- 专注Java技术分享
- 专注Python技术分享
& 2017 伯乐在线本帖子已过去太久远了，不再提供回复功能。简单讲，px是绝对单位，em和rem是相对单位。px大家都熟悉，这里主要讨论em和rem。现在有以下一个段落：&p&当斧头来到树林的时候，好多树都说，至少&span&它的手柄&/span&是自己人&/p&当不给它设置字体大小时，使用默认大小，也就是16px大小，效果如下：emem是指相对于父元素的大小，也就是说对于p和span而言，它的大小都是1em，这里的1em = 16px。我们将span的大小改为2em，效果如下：span{
font-size: 2em;}可以看到span的大小相对于p大了一倍，假设span里面还有一级标签：&p&当斧头来到树林的时候，好多树都说，至少&span&它的&a&手柄&/a&&/span&是自己人&/p&现在我们知道p标签大小是1em，span的大小是2em，如果想让a标签的大小和p标签一样，应该设置为多少？因为em是相对标签，所以不能设置成1em，而是相对于其父元素span的0.5em：a{
font-size: 0.5em;}rem使用em很好地将相对大小表现出来了，但是我们也发现在子元素里有时候想设置除了父元素以外的元素大小时，还要计算相对大小，rem就解决了这个问题。rem是指相对于html根元素的字体大小。还是刚才的例子，我们想保证a标签字体大小和p标签一样，而p标签的大小正好是相对于html的 1倍，所以我们也可以将a标签的大小设置为1rem:a{
font-size: 1rem;}效果也是一样的。
最新教程周点击榜
微信扫一扫zhangjf 的BLOG
用户名：zhangjf
文章数：44
评论数：12
访问量：112344
注册日期：
阅读量：5863
阅读量：12276
阅读量：391860
阅读量：1082807
[匿名]51cto游客：
[匿名]郁闷：
[匿名]div+css：
51CTO推荐博文
这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章，题目有点吓人，但是确实是现在国内网页制作方面的一些缺陷。我一直也搞不清楚
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处理汉字时，对于浮点的取值精确度有限。不知道有没有
其他的解释。
了这篇文章
类别：┆阅读(0)┆评论(0)