em的计算方法(实用、赞）

红太狼 2022-04-15 05:51 251阅读 0赞

之前据我所了解css中em不是一个固定值，而是一个相对值，它的值等于父元素的font-szie，即1em=父元素的font-szie，如果父元素没有font-szie那么取浏览器的默认值（一般为16px，可以理解为父元素继承所得的font-size），但是这种理解是片面的。  
例如：

<div id="parent" style="font-size: 16px;">
      <div id="child" style="font-size: 1.25em; line-height: 1.5em;" >Ok</div>
    </div>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWxlbl9qYWs_size_16_color_FFFFFF_t_70][]

上图中parent的font-size = 16px , 那么child元素font-size=16px \* 1.25=20px，这个容易理解。如此类推line-heigth: 1.5em应为16px \* 1.5 = 24px, 但它的值却是30px, 这是为什么呢？  
原来元素自身上其他的属性（font-size除外），值如“boder、width、height、padding、margin、line-height”等的em参考值是元素自身font-size而不是父组的font-size, 所以Child的line-height=16px \* 1.25 \* 1.5 = 30px；

### 结论： ###

### 1、字体计算公式 ###

1em = 父元素的font-size   
    像素值 ÷ 父元素的font-size = em值

### 2、其它属性的计算公式 ###

1em = 元素自身的font-size      
    像素值 ÷ 元素自身的font-size = em值

可参考：《[关于css中em和百分数的区别][css_em]》 的最佳答案

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWxlbl9qYWs_size_16_color_FFFFFF_t_70]: /images/20220415/5e566c93792547e6a566e5d91841e763.png
[css_em]: https://zhidao.baidu.com/question/754489442073667604.html

发表评论取消回复

表情：

评论列表（有 0 条评论，251人围观）

还没有评论，来说两句吧...

相关阅读

相关超赞的实用前端社区精选？

转载作者：黑马程序员前端链接：https://www.zhihu.com/question/39503897/answer/2998752442 社区精选

Dear 丶/ 2024年03月22日 10:06/ 0 赞/ 66 阅读

相关深入理解Cookie (实用、赞）

原文出处：[https://www.jianshu.com/p/6fc9cea6daa2][https_www.jianshu.com_p_6fc9cea6daa2] 延伸

拼搏现实的明天。/ 2023年07月13日 08:24/ 0 赞/ 19 阅读

相关巧用ngStyle动态计算图表的高度（赞，实用）

参考资料： 1、[如何正确使用函数\[ngStyle\]][ngStyle] 先上图： ![watermark_type_ZmFuZ3poZW5naGVpdG

浅浅的花香味﹌/ 2023年05月30日 04:58/ 0 赞/ 20 阅读

相关 TimeSpan格式化 (实用、赞）

原文出处：[https://blog.csdn.net/cxb2011/article/details/103538849/][https_blog.csdn.net_cxb2

雨点打透心脏的1/2处/ 2022年12月27日 08:38/ 0 赞/ 152 阅读

相关 WEB-互补色与对比色的计算与获取 (实用、赞）

原文出处：[http://blog.ipodmp.com/2014/03/web-and-calculation-of-complementary-and-contrastin

我就是我/ 2022年12月05日 12:08/ 0 赞/ 178 阅读

相关根据背景图片计算文字颜色（实用、赞）

原文出处: [https://www.it1352.com/533401.html][https_www.it1352.com_533401.html] 延伸阅读： 1

系统管理员/ 2022年12月05日 00:54/ 0 赞/ 211 阅读

相关彻底弄懂px,em和rem的区别（赞）

原文出处：[https://www.cnblogs.com/langee/p/6890362.html][https_www.cnblogs.com_langee_p_6890

落日映苍穹つ/ 2022年05月13日 03:22/ 0 赞/ 219 阅读

相关 JavaScript对象中属性的getter和setter方法 (实用，赞）

原文出处：[https://blog.csdn.net/u012510478/article/details/54312482][https_blog.csdn.net_u01

爱被打了一巴掌/ 2022年05月08日 15:24/ 0 赞/ 238 阅读

相关 em的计算方法(实用、赞）

之前据我所了解css中em不是一个固定值，而是一个相对值，它的值等于父元素的font-szie，即1em=父元素的font-szie，如果父元素没有font-szie那么取浏览

红太狼/ 2022年04月15日 05:51/ 0 赞/ 252 阅读

相关实用色轮图（赞、实用）

原文出处：[https://www.jb51.net/photoshop/228718\_2.html][https_www.jb51.net_photoshop_228718

痛定思痛。/ 2021年12月12日 13:45/ 0 赞/ 321 阅读