深入理解CSS中em, rem, ex区别，及使用技巧

lbool 发布于2019-08-29 16:44 / 2439人阅读

摘要：中常见尺寸单位描述百分比英寸厘米毫米一个是一个字体的。在中，是非常有用的单位，因为它可以自动适应用户所使用的字体。在中唯一例外的是属性，它的和值指的是相对父元素的字体大小。

CSS 中常见尺寸

单位	描述
%	百分比
in	英寸
cm	厘米
mm	毫米
ex	一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。)
pt	磅 (1 pt 等于 1/72 英寸)
pc	12 点活字 (1 pc 等于 12 点)
px	像素 (计算机屏幕上的一个点)
em	1em 等于当前的字体尺寸。 2em 等于当前字体尺寸的两倍。例如，如果某元素以 12pt 显示，那么 2em 是24pt。在 CSS 中，em 是非常有用的单位，因为它可以自动适应用户所使用的字体。
rem	rem表示“Root EM”,字面上指的是根元素的em大小。在Web文档的上下文中，根元素就是你的html元素。如果没有重置，html默认font-size:16px。

em 和 rem 比较

单位	特点
em	相对单位em是相对于元素本身的字体大小的。在css中唯一例外的是font-size属性，它的em和ex值指的是相对父元素的字体大小。
rem	集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免（使用em）字体大小逐层复合的连锁反应

em 缺点

em 的值并不是固定的；

em 会继承父级元素的字体大小。

举例

body{
  font-size: 10px;
}

h2{
  display: block;
  width: 80%;
  font-size: 1.5em;
  margin: 0.5em;
}

h2的字体大小继承了body字体， 10px * 1.5 = 15px 
h2的margin属性则是相对于本元素字体大小： 15px * 0.5 = 7.5px
 如下图所示

rem 使用小技巧

body选择器中声明Font-size=62.5%;

将你的原来的px数值除以10，然后换上rem作为单位；

参考文章链接

css中单位em和rem
彻底弄懂css中单位px和em,rem的区别

idc机房托管超融合服务器深入理解系列 html中使用css css中使用cdn 深入理解linux

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113948.html

深入理解-CSSem>内联元素之font-size

摘要：给一个内联元素设置背景，这背景所占的区域就可以看成内容区域。看了很多文章最后总结和整理了这些，下一篇介绍说说在内联元素中的作用。在前端开发中，似乎控制不同大小文字之间，或者文字与图标之间对齐总是不那么得心应手，总觉得少了点什么，这其中其实跟CSS中几种跟内联元素相关的属性有很大的关系，从我的感觉看，平时遇到的30%的css问题都是由于搞不清这几种属性的关系有关。这里第一篇文章先介绍字...

宠来也 2019-08-05 13:34 评论0 收藏0
深入理解-CSSem>内联元素之font-size

摘要：给一个内联元素设置背景，这背景所占的区域就可以看成内容区域。看了很多文章最后总结和整理了这些，下一篇介绍说说在内联元素中的作用。在前端开发中，似乎控制不同大小文字之间，或者文字与图标之间对齐总是不那么得心应手，总觉得少了点什么，这其中其实跟CSS中几种跟内联元素相关的属性有很大的关系，从我的感觉看，平时遇到的30%的css问题都是由于搞不清这几种属性的关系有关。这里第一篇文章先介绍字...

superw 2019-08-02 10:12 评论0 收藏0
深入理解-CSSem>内联元素之font-size

摘要：给一个内联元素设置背景，这背景所占的区域就可以看成内容区域。看了很多文章最后总结和整理了这些，下一篇介绍说说在内联元素中的作用。在前端开发中，似乎控制不同大小文字之间，或者文字与图标之间对齐总是不那么得心应手，总觉得少了点什么，这其中其实跟CSS中几种跟内联元素相关的属性有很大的关系，从我的感觉看，平时遇到的30%的css问题都是由于搞不清这几种属性的关系有关。这里第一篇文章先介绍字...

tuantuan 2019-08-29 15:04 评论0 收藏0
CSSem> 单位

摘要：概览中的长度单位有很多，觉得有必要整理备忘。单位大体分为两大类绝对单位，不会因为其他元素的尺寸变化而变化。如果想使用显示窗口的宽度或高度而不是父元素的宽度将会怎么样这正是和单位所提供的。和现代浏览器都支持这两个单位。概览 CSS中的长度单位有很多，觉得有必要整理备忘。网上介绍的也比较多和全，详见参考资料。单位大体分为两大类：绝对单位，不会因为其他元素的尺寸变化而变化。相对...

ARGUS 2019-08-28 18:23 评论0 收藏0
CSSem>学习摘要-数值和单位及颜色

摘要：每对十六进制数代表一个通道红色绿色或者蓝色允许我们指定个可用值。例如，这个代码给出以下结果这些值比较复杂，不太容易理解，但是它们比关键字更灵活您可以使用十六进制值来表示您想要在颜色方案中使用的任何颜色。在CSS中，值的类型有很多种，一些很常见，一些你却几乎没怎么遇到过。我们不会在这篇文档中面面俱到地描述他们，而只是这些对于掌握CSS可能最有用处的这些。本文将会涉及如下CSS的值：数值: ...

luckyyulin 2019-04-23 13:40 评论0 收藏0