4当前位置:网页制作CSS教程-简述css中em和px的区别
4网页制作分类
CSS | HTML
FrontPage | DreamWeaver
JavaScript | ASP
.Net | PHP
JSP | XML
数据库 | PhotoShop
FireWorks | Flash
视频 | 其它
4赞助商链接
4最新网页制作
·CSS盒子模型图解
·设置span宽度和高度的方法
·CSS3通过scale()和rotate()实现放大和旋转
·ASP中空字符串、IsNull及IsEmpty的区别
·CSS Bug顺口溜
·CSS实现未知高度的DIV垂直居中
·CSS实现水平垂直居中的两种方法
·简述css中em和px的区别
·兼容各种浏览器的css:fixed定位效果
·CSS分隔线的几种方法
4热门网页制作
·使网页变灰的代码(包括FLASH等所有网页元素)
·应用CSS美化网页
·CSS实现文字底部对齐
·一款DIV+CSS制作的导航条
·CSS隐藏表格超出的内容
·CSS使网页背景图片居中的三种方法
·用CSS改变鼠标箭头
·表格边框CSS语法大全
·CSS制作文本或图片闪烁效果
·几种常用的新闻列表样式
4相关网页制作
·我的CSS Hack观点
·IE6下文字line-height失效的解决方法
·CSS各种选择符详解
·CSS实现文字超出宽度显示省略号
·彻底弄懂css中单位px和em的区别
·改善网站为xhtml+CSS布局
·CSS盒子模型图解
·CSS 3的border-image作用详解
·CSS样式表简明教程
·IE6下文字line-height失效的解决方法
简述css中em和px的区别
类别:CSS教程    来源:网络    时间:2013/9/19    贴士:推荐给好友
收藏本页 8 
  之前听人说过,网站制作中字体单位应该用em而不用px,原因简单来说就是支持IE6下的字体缩放,在页面中按ctrl+滚轮,字体以px为单位的网站没有反应。px是绝对单位,不支持IE的缩放,em是相对单位。

  首先了解一下em是何物?

  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会继承父级元素的字体大小。

  重写步骤:

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

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

  简单吧,如果只需要以上两步就能解决问题的话,可能就没人用px了。经过以上两步,你会发现你的网站字体大得出乎想象。因为em的值不固定,又会继承父级 元素的大小,你可能会在content这个div里把字体大小设为1.2em,也就是12px。然后你又把选择器p的字体大小也设为1.2em,但如果p属于content的子级的话,p的字体大小就不是12px,而是1.2em=1.2*12px=14.4px。这是因为content的字体大小被设为1.2em,这个em值继承其父级元素body的大小,也就是16px*62.5%*1.2=12px, 而p作为其子级,em则继承content的字体高,也就是12px。所以p的1.2em就不再是12px,而是14.4px。

  3、重新计算那些被放大的字体的em数值。避免字体大小的重复声明,也就是避免以上提到的1.2*1.2= 1.44的现象。比如说你在#main中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。

  诡异的12px汉字:

  在完成em转换时还会发现一个诡异的现象,就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小,而是稍大一点。这个问题我已经解决,你只需在body选择器中把62.5%换成63%就能正常显示了。
·上一篇:兼容各种浏览器的css:fixed定位效果
·下一篇:CSS实现水平垂直居中的两种方法
本站部分内容收集整理于网络,仅用于学习,不存在商业目的,如有涉及版权等问题请联系站长,本站将在第一时间内进行处理!
Copyright © 2007-2010 Zzsky.Cn  中国站长天空  网站制作维护:可乐猫  QQ:8127544(请注明来意)
设为首页  加入收藏  联系站长  友情链接  闽ICP备12017729号