动态网站制作指南 [  QQ表情  ]
[ 投票调查 ]
[ 企业邮箱 ]
[ 网站空间 ]
网络编程 | 站长之家 | 网页制作 | 图形图象 | 操作系统 | 冲浪宝典 | 软件教学 | 网络办公 | 邮件系统 | 网络安全 | 认证考试 | 系统进程
ASP源码 | .Net源码 | PHP源码 | JSP源码 | JAVA源码 | CGI源码 | VB源码 | C++源码 | Delphi源码 | PB源码 | VF源码 | 汇编 | 服务器
电脑书籍下载:程序设计书籍 | 数据库教程书籍 | 平面与多媒体书籍 | 网络通讯书籍 | 系统管理书籍 | 网络安全书籍 | 认证考试书籍
Firefox | IE | Maxthon | 迅雷 | 电驴 | BitComet | FlashGet | QQ | QQ空间 | Vista | 输入法 | Ghost | Word | Excel | wps | Powerpoint
asp | .net | php | jsp | Sql | c# | Ajax | xml | Dreamweaver | FrontPages | Javascript | css | photoshop | fireworks | Flash | Cad | Discuz!
当前位置 > 网站建设学院 > 网页制作 > CSS教程
网页制作:Dreamweaver教程,FrontPages教程,Javascript教程,HTML教程,CSS教程,心得技巧,DHTML教程,网页特效,Discuz!论坛
文章搜索服务
邮件订阅
输入你的邮件地址,
你将不会错过任何关于:
[ CSS教程 ]的信息



本月文章推荐
.实践DIV+CSS网页布局入门指南.
.纯CSS制作的网页中的lightbox效果.
.DIV+CSS常用的网页布局代码.
.用相对定位和负向移动完成图片象.
.css布局实例:网页布局的方法.
.如何用CSS层叠样式表控制鼠标显示.
.CSS+DIV设计实例:实现让多个DIV.
.CSS仿淘宝首页导航条按钮布局效果.
.学习CSS制作网页总结的一些经验.
.利用css和js实现firefox和IE都支.
.CSS实现导航条图片的翻转菜单.
.用CSS设计高体验的表单显示效果示.
.CSS语法手册(三)文本填充,边框.
.避免表格table被撑开变形的CSS.
.完全用CSS实现的中英文双语导航菜.
.纯CSS的下拉菜单 支持IE6 IE7 Fi.
.一个针对IE7的CSS Hack.
.实现页面图片阴影特效.
.CSS教程关于css框架网页设计.
.应用DIV+CSS编码时容易犯的一些错.

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

发表日期:2007-11-13 |


  在国内网站中,包括三大门户,以及“引领”中国网站设计潮流的蓝色理想,ChinaUI等都是使用了px作为字体单位。只有百度好歹做了个可调的表率。而在大洋彼岸,几乎所有的主流站点都使用em作为字体单位,也就是可调的。没错,px比em更加容易使用,大部分读者不知道em为何物或者它相当于多少px。国外人士如此重视网站易用性(Accessibility),不仅因为其根生蒂固的人文精神,直接原因可能是因为有一部法律来约束他们—例如美国的Section 508,强制网站达到一定的易用性。

      关键点:

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

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

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

  px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

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

  任意浏览器的默认字体高都是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类型的顺序改变翻滚效果 人气:3090
下一篇:如何将XHTML+CSS页面转换为打印机页面 人气:2540
浏览全部CSS的内容 Dreamweaver插件下载 常用网页广告代码全集
  最新网站源码 最新软件下载
2008-7-25 WikyBlog v1.7.0.1 多国语言版
2008-7-25 乐彼网上开店系统(56770 Eshop)
2008-7-25 赛特网站管理系统sitecms v3.6.0
2008-7-25 Modoer多功能点评系统 v1.0.1 Bu
2008-7-25 Shangducms Teamsuit! v1.1.0 开
2008-7-25 幻影动漫网视频系统(Ppdong) v1.
2008-7-25 acteecompany企业网站建设系统 v
2008-7-25 恒浪整合管理系统 ims v4.1 ACCE
2008-7-25 艺术图库系统 v1.0 beta
2008-7-19 UltraEdit 简体中文增强版 14.10
2008-7-19 CentOS 5.2 i386 LiveCD
2008-7-19 Snapture多功能相机 v1.4
2008-7-19 iAcces中文输入法 v1.0Build016
2008-7-19 Cookbook烹饪秘籍 v2.5
2008-7-19 苹果专用DVD转换工具 v1.1.59汉化
2008-7-19 Modem修复软件ZiPhone修改版04.0
2008-7-19 AgileMessenger即时通讯工具美化
2008-7-19 Sketches画图软件 v0.7b6破解版


  发表评论
姓 名: 验证码:
内 容:
[ 汉字翻译拼音 ] [ 广告代码 ] [ 符号对照表 ] [ 进制转换 ] [ 经典小工具 ] [ 个税计算 ] [ 汉字简繁转换 ] [ 普通单位换算 ] [ 公制单位换算 ]
[ 生辰老黄历 ] [ 国内电话区号 ] [ 国家代码与域名缩写 ] [ 文字加密解密 ] [ 健康查询 ] [ 万年历 ] [ 手机号码查询 ] [ ip搜索 ] [ Google PR查询 ]
业务联系 | 广告刊登 | 频道合作 | 投稿荐稿 | 联系方式 | 加入收藏 | RSS订阅
Copyright © 2000-2008 www.knowsky.com All rights reserved | 网络实名:动态网站制作指南 | 沪ICP备05001343号