px和em的战争
- 小明 - 博客园-首页原创精华区其实我就是想说px和em的区别，网上资料其实一堆堆，但是还不如自己试验总结的清楚. 前端高手可能觉得这玩意简单，但是作为小猫，还是好好学一下. px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易. em得值不是固定的，并且em会继承父级元素的字体大小. 任意浏览器的默认字体高都是16px.
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 原文链接
最新新闻：
· 浏览器之父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)
相关 [px em 战争] 推荐：
理解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工厂的安全问题
- 龙 - SolidotShizhao 写道 "最近因为大连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个胜出：. 调研并不科学，只是初步佐证自己的想法，可能是符合以下特征：.
线下药店的战争
- -虽然A股线下大型连锁药店的前景被看好，但其未来并不乐观. 文 | 陈汐 刘建中有利润的地方就会有江湖，有江湖就会有战争. 超市便利店的毛利率约20%，而中国A股四大连锁药店的毛利率约为40%. 中国A股四大连锁药店为益丰药房（603939.SH）、大参林（603233.SH）、老百姓（603883.SH）和一心堂（002727.SZ）.