em相对单位
前言： Css提供很多种方式去定义一个值，大家最熟悉的就是我们经常要用到的px了，它被称之为‘绝对单位‘，也就是说我们在设置一个div的width为10px是不管在哪里它都是10px不会发生改变，而其他单位呢，比如今天的主人公em，或者rem，它俩其实是‘相对单位’，相对单位的值会根据外部的一些因素从而影响到自身。例如，10em这个单位值是要取决于你在哪里用的它，又或者在那个元素（有时候甚至于在那个属性）。所以说em在我们使用中是有一些难度的。
css机制
CSS是通过迟邦定（late-binding）的方式把样式渲染到web页面上的：内容和它的样式会在各自的渲染完成之后再合并到一起。比起其他类型的图形设计，这给设计过程添加了它们没有的复杂程度，同时也赋予CSS更强大的能力 —— 一个样式表可供成百上千个页面使用。此外，用户可以直接改变页面的最终呈现方式。举个例子，用户可以更改默认字号大小或者调整浏览器窗口的大小。
相对单位绝对单位计算机制
相对单位是CSS提供的工具之一。与其把字号大小设置为14px，你可以把它设置为与窗口大小成比例缩放。或者，你可以设置页面上所有元素是依赖基础字号大小的变化而变化的，然后用一行代码就可以达到调整整个页面的目的。接下来，我们来看看CSS提供了哪些方式来实现以上的效果。
像素（pixel）、点（point）和pc（pica）
CSS支持一些绝对长度单位，其中最常见也最基本的是像素（px）。较不常见的绝对单位有毫米（mm，millimeter）、厘米（cm，centimeter）、英寸（in.，inch）、点（pt，point，印刷术语，长度为1/72 inch）以及pc（pica，印刷术语，长度为12 points）。如果你想了解其中的计算方式，以上的长度单位都可以直接转换成另一个单位：1 inch = 25.4 mm = 2.54 cm = 6 pc = 72 pt = 96 px。因此，16px与12pt（16/96×72）是等价的。设计师通常更熟悉点（point）的使用，而开发人员更习惯于像素，因此在和设计师沟通时，你可能需要在两者之间做一些计算工作。
em和rem
em是我们写css样式最常看到的相对单位却又懒得用的单位了，这是排版中使用的一种度量方式，基准值是当前元素字号大小。在CSS中，1rem表示当前元素字号大小，实际取值取决于在那个元素上应用，下图展示了一个padding为1rem的div。
padding为1rem的元素，里面文字是span包裹（目的是让您看着更为明显）
模板代码如下。这套样式规定字号12px，也就是元素本身1em代表的值，然后使用em声明padding。
在#box上使用em
#box的padding各个方向的值均为字号的font-size
把padding赋值为1em，乘以字号，得到一个值为12px的padding渲染值。重点来了，使用相对单位声明的值会由浏览器转化为一个绝对值，我们称之为计算值。
在这个例子里，将padding改为2em会生成一个24px的计算值。如果同一个元素的另一个选择器，用一个不一样的字号值去覆盖它，这会改变em在这个域下的基准值，那么padding的计算值也会相应变化。
在设置padding、height、width或border-radius等属性时，使用em可能会很方便，因为如果它们继承了不同的字号大小，或者用户更改了字体设置，这些属性会均匀地缩放。
展示了两个不同大小的盒子。盒子内的font-size、padding和border-radius各不相同。
有相对大小的padding和border-radius的元素
不同的字号大小会改变em的实际值
所以我很清楚，在写程序时候尽量少用em，他在padding，margin单位里表现很好，但是请不要把em放到font-size上，那样会很复杂。
网友评论