px和em的战争

淩亂°似流年 2021-10-20 00:14 327阅读 0赞

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

其实我就是想说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>

效果如下：

![2011092913175811.jpg][]

这两个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是作对比的。

现在的效果是这样的：

![2011092913323134.jpg][]

恩，看起来这几个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  }

效果是这样的

![2011092913381655.jpg][]

很明显，前两个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。看看效果。

![2011092913495051.jpg][]  
这是为什么呢。。

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=22.5px，宽度12\*10\*1.5\*1.5=270px；高度4\*10\*1.5\*1.5=90px （没有计算border）

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

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

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

转载于:https://www.cnblogs.com/CherryGhost/archive/2011/09/29/2195451.html

[2011092913175811.jpg]: /images/20211019/81c3928599ad473b83293ea24fb9974c.png
[2011092913323134.jpg]: /images/20211019/9ce9aee005814ceb88196f4980bbdc8a.png
[2011092913381655.jpg]: /images/20211019/5daacfc482f244268ad3e96eddade3a9.png
[2011092913495051.jpg]: /images/20211019/016d671e2baa442fa16069c87202bb1e.png