px和em的战争

标签: px em 战争 | 发表时间:2011-09-29 14:00 | 作者:§ 薄樱 § 小明
出处:http://www.cnblogs.com/

好吧。我承认我标题党了。

其实我就是想说px和em的区别,网上资料其实一堆堆,但是还不如自己试验总结的清楚。前端高手可能觉得这玩意简单,但是作为小猫,还是好好学一下。

下面一点点说~~~

 

px和em都是长度单位,区别是,px的值是固定的,指定是多少就是多少,计算比较容易。em得值不是固定的,并且em会继承父级元素的字体大小。

 

任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。

为了简化计算,在css中的body选择器中声明Font-size=62.5%,这就使em值变为16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

就像这样:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body
{Font-size:62.5%}
.div_px
{font-size:10px; border:1px red solid;width:120px; height:20px}
.div_em
{font-size:1em; border:0.1em red solid;width:12em; height:2em}

</style>
</head>

<body>
<div class="div_px" >1、这里是div_px</div><br/>

<div class="div_em" >2、这里是div_em</div><br/>

<br/>
</body>
</html>

效果如下:

这两个div基本是一样的。

 

但是,如果仅仅是这样,那就好办了。直接替换就好了。

‘em会继承父级元素的字体大小’这条,要了亲命了。。。

比如这样的一个页面:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body
{Font-size:62.5%}

.div_out
{font-size:1em; border:1px red solid;width:12em; height:4em }
.div_in
{ font-size:1em; border:1px blue solid;width:12em; height:4em }
</style>
</head>

<body>

<div class="div_out" >
3、这是div_out
<div class="div_in" >
4、这是div_in
</div>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/>
<div class="div_in" >
5、这是在外面的div_in
</div>

</body>
</html>

这里有3个div,3和4是套在一起的,5是作对比的。

现在的效果是这样的:

恩,看起来这几个div效果是一样的,div_out和div_in的设定,font-size都是1em,所以继承没有表现出来。

通过检测,3和4的字体都是10px,长度都是122px,宽度都是42px。(设置了border,所以多了2px)

 

现在改一下:

.div_out{font-size:1.5em; border:1px red solid;width:12em; height:4em  }

效果是这样的

很明显,前两个div变大了,说明。。。
红框的div_out,由于font-size设置了1.5em,真实字体大小是10*1.5=15px,宽度12*10*1.5=180px;高度4*10*1.5=60px (没有计算border)

样式div_in没有做更改,font-size仍然是1em,但是嵌套在3里面的4号div和5效果不一样,4继承了div_out。

 

再来一个:

.div_out{font-size:1.5em; border:1px red solid;width:12em; height:4em  }
.div_in
{font-size:1.5em; border:1px blue solid; width:12em; height:4em }

这次把两个样式的font-size都设置为1.5em。看看效果。


这是为什么呢。。

3号div真实字体大小是10*1.5=15px,宽度12*10*1.5=180px;高度4*10*1.5=60px (没有计算border)

5号div真实字体大小是10*1.5=15px,宽度12*10*1.5=180px;高度4*10*1.5=60px (没有计算border) 

4号div真实字体大小是10*1.5*1.5=15px,宽度12*10*1.5*1.5=270px;高度4*10*1.5*1.5=90px (没有计算border)

……………………………………………………………………………………………………………………………………………………………………………………………………………………

 

如果都用px,那么完全没有问题,你设置多少就是多少,不会让人计算的头晕。我平时都用px作为字号,宽度,高度等的单位,唯一用到em的就是字体缩进。

关于px和em各位还有什么要注意的,如果能告诉我,感激不尽。谢谢!

作者: § 薄樱 § 发表于 2011-09-29 14:00 原文链接

评论: 6 查看评论 发表评论


最新新闻:
· 浏览器之父Marc Andreessen:丧钟为甲骨文而鸣(2011-09-29 17:49)
· 印度35美元平板机继续跳票(2011-09-29 17:46)
· 专访谷歌产品副总裁:Google+将改变整个谷歌(2011-09-29 17:44)
· 传大众点评网遭200家商户围攻 被指竞价排名(2011-09-29 17:36)
· 联通发动国庆手机促销攻势 3500个店面送礼品(2011-09-29 17:19)

编辑推荐:最老程序员创业札记:全文检索、数据挖掘、推荐引擎应用38

网站导航:博客园首页  我的园子  新闻  闪存  小组  博问  知识库

相关 [px em 战争] 推荐:

px和em的战争

- 小明 - 博客园-首页原创精华区
其实我就是想说px和em的区别,网上资料其实一堆堆,但是还不如自己试验总结的清楚. 前端高手可能觉得这玩意简单,但是作为小猫,还是好好学一下. px和em都是长度单位,区别是,px的值是固定的,指定是多少就是多少,计算比较容易. em得值不是固定的,并且em会继承父级元素的字体大小. 任意浏览器的默认字体高都是16px.

理解EM算法

- Chin - 我爱自然语言处理
EM(Expectation-Maximization)算法在机器学习和自然语言处理应用非常广泛,典型的像是聚类算法K-means和高斯混合模型以及HMM(Hidden Markov Model). 笔者觉得讲EM算法最好的就是斯坦福大学Andrew Ng机器学习课的讲课笔记和视频. 本文总结性的给出普遍的EM算法的推导和证明,希望能够帮助接触过EM算法但对它不是很明白的人更好地理解这一算法.

在EM中管理Metric

- - CSDN博客数据库推荐文章
Metric的引入主要为了实现proactive(积极、主动)维护数据库:. 在EM中可以对Metrics进行管理:. 在这里可以对各项指标设置告警的Warning Threshold(阈值):. 就如我们刚才设置的,如果表空间使用率超过35%,则会告警:. 点击我们可以看到系统给出的建议,当然也可以在视图中查看:.

大连px项目:危险已解除?

- avalon - 南方周末-热点新闻
目前,大连PX项目溃堤风险已得到有效控制,尚未发现有毒气体泄漏. 尽管早前也曾两度“与死神擦身而过”,然而,px项目始终是悬在大连660多万居民头上的那把达摩克利斯之剑.

PX工厂的安全问题

- 龙 - Solidot
Shizhao 写道 "最近因为大连PX工厂事件,PX生产对附近居民的安全性问题成为中国媒体热点. 对此中国官方媒体表示PX毒性低,国外厂家大多在市区附近. 德国之声就此问题采访了德国环境署化学家Thomas Krämer. Krämer强调PX缺乏致癌证据表示科学家对此问题未知,而并不表示它不会致癌.

市民上街抗议 大连决定搬迁PX项目

- suki - 路透中文网-时事要闻

android中dip、dp、px、sp和屏幕密度

- - 编程语言 - ITeye博客
dip: device independent pixels(设备独立像素). 不同设备有不同的显示效果,这个和设备硬件有关,一般我们为了支持WVGA、HVGA和QVGA 推荐使用这    这个,不依赖像素.     这里要特别注意dip与屏幕密度有关,而屏幕密度又与具体的硬件有关,硬件设置不正确,有可能导致dip不能正常显示.

公共安全在何处,新闻1十1报道大连PX被和谐

- aWoo - 一五一十最新文章
作者:推特迷失者 | 评论(0) | 标签:时事观点. 2011年8月9日央视晚上1十1节目出预告报道大连PX项目,这个节目已通过央视的审核,但在预告出来后,在短短8分钟内,央视不再播放,而是放广告,重播焦点访谈,微博上人们愤怒转发,大连人、中国人的知情权再次被强奸. 一个高度危险的项目,被层层遮掩,这次台风出事后又打采访的央视记者,这些操作项目的人能量和胆量之大让人刮目相看,而在短短八风钟搞定央视,在捂住白岩松的嘴的同时,我们看到一个肮脏手的背景.

图标之间的战争

- - 曉生語錄
当手机屏幕上装满移动时,某些应用很容易被忽略,在设计图标时不得不考虑最终的效果是否足够的抢眼,产品之间的竞争先从图标开始. 那究竟具备何种特征的图片更为突出. 做一个小实验:iPhone装7屏112个的应用程序,随机调查了10多位同事,让他们选择每屏中第一眼会注意到的图标,最终以下3个胜出:. 调研并不科学,只是初步佐证自己的想法,可能是符合以下特征:.

搜索战争?等着看社交战争吧

- hi3w - 36氪
切换回2000年,互联网迎来了创新的高潮,现有股票市场摇摇欲坠,Lycos,Yahoo!,Infoseek和Excite都在做搜索. 内容发布商从搜索引擎带的的流量中获益,相比AOL,CompuServe等封闭的网络,搜索引擎足够开放,帮助网站传播内容,成为无论大小内容发布商还是零售商非常大的流量来源.