频道直达 - 学院 - 下载 - 交易 - 特效 - 字库 - 手册 -排名-工具- 繁體
网页教学网站开发 设为首页
加入收藏
联系我们
建站搜索: 常用广告代码   用户注册 | 用户登陆
您当前的位置:中国建站之家 -> 网站开发设计技术教程 -> HTML/CSS/DIV+CSS教程 -> 学习CSS了解单位em和px的区别

学习CSS了解单位em和px的区别

作者:未知  来源:www.jz123.cn  发布时间:2007-11-12 8:24:53  发布人:圈圈

减小字体 增大字体

这里引用的是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处理汉字时,对于浮点的取值精确度有限。不知道有没有其他的解释。

 


将本文收藏到QQ书签与更多好友分享
[打 印]
[] [返回上一页] [收 藏]
∷相关文章评论∷    (评论内容只代表网友观点,与本站立场无关!) [更多评论...]
精彩推荐
热门文章
· 注册码大全二
· 注册码大全四
· 注册码大全一
· 要10G免费网络硬盘的请进..
· 通过google 赶快来赚美金..
· 注册码大全十
· 头像-qq头像(qq新头像)4..
· 让你轻松架设FTP服务器1..
· 注册码大全三
· 梦幻背景图片7
· 卡通动物图片6
· 网页制作素材-按钮素材2..
· 让你轻松架设FTP服务器5..
· 风景图片8
· 注册码大全九
· 让你轻松架设FTP服务器2..
关注此文读者还看过
· SQL Server 7.0 入门(七..
· LINE 的计数器源程序(附..
· 在Windows中安装Apache2..
· Vipx.net 免费域名
· 格式化日期类SimpleDate..
· 网络"三替公司"走红 互联..
· ASP.NET技巧:脚本获取选..
· 我在桌面上删帖子
· Fireworks教程:绘制性感..
· 从Donews被收购看个人网..
· Asp.net编程中的数组基础..
· 用ASP批量更新SQL SERVE..
· 教你轻松了解嵌入式SQL中..
· 风雨过后就见彩虹—设计..
· TOM为黄健翔解说门维权 ..
· 在VB.NET中使用动态属性..
相关文章
· 学习CSS的10大理由
· 帮助你好好学习CSS的..
· 学习CSS的伪类,WEB标准学习..
· 学习CSS从何入手?
· 网页制作学习CSS2的单位
· 网页制作学习CSS2的听觉参考..
· 网页制作学习CSS2的打印属性..
· 学习CSS:了解CSS中的类、伪..
· 小结:通过实例学习CSS进行..
· 初学者指南之详细学习CSS的..
· 学习CSS:优化我们的CSS样式..
· 简单学习CSS实现网页布局的..
· 实例学习CSS中的优先权的问..
· 制作网页时学习CSS应注意的..
关于本站 - 网站帮助 - 广告合作 - 下载声明 - 友情连接 - 网站地图 - 人才招聘
网站合作、内容监督、商务咨询:QQ: 9576619
Copyright ? 2005--2008 中国建站之家版权所有
粤ICP备05092265号