标签：col temp 简单的 flexbox 字体 w3c 拓展 因此 怎样
CSS单位主要分析em、rem、fr这三个较难理解的单位吧,其他的就是px,%,cm等等
px在不同场景之下为同样的值，我们把它称作绝对单位，而em和rem受外部因素的影响下而改变，因此称作相对单位。
我们需要了解到为什么要拓展em，rem这样的相对单位呢？
比如我就特爱用px，感觉所有的东西都能用px来表现距离，但是也要与时俱进嘛。
em是最常见的相对长度单位，这是排版中使用的一种度量方式，基准值是当前元素的字号大小。 在CSS中，1em表示当前元素的字号大小，实际值取决于在哪个元素上应用。
以px为单位的基础字号大小，但希望把它改用em声明，下面有个简单的计算公式：目标em值 = 目标像素值 / 父元素（被继承元素）像素值。
重点就是以父级字号小心进行相对子级的大小变换，但这需要注意到的是不仔细的人还是少采用em为好，当em遇上font-size，事情会变得很复杂。
rem-“font size of the root element”，w3c对于rem的一句描述，rem比em多的一个r也就是root。
前面我们知道em这单位是相对于父级设置字体大小，而rem是相对于根html设置字体大小。
总的来说做响应式布局em和rem是不错的选择，不过我更倾向于rem，给html设置好字体大小，后面的元素可以使用确定的rem了。
fr，这个单位主要运用于grid布局中。
而我在学习grid布局的过程中，就一直不明白fr这单位到底是个怎样的单位？它有什么样的作用？
fr单位可以帮助我们创建一个弹列的网格轨道，它代表了网格容器中可用的空间（就像Flexbox中无单位的值）。
当fr与其他单位结合一起用时，fr是基于网格容器可用空间来计算。
注意是剩余可用空间，fr的好处也是帮助我们省去了一部分计算的麻烦。
举个例子：
grid-template-columns: 1fr 1fr 2fr;
就如这串代码，网格列，它就将剩余的空间分成了4部分，其中前两列占1份，后两列占2份。
再如：
grid-template-columns：2em 1fr 24% 1fr;
这里的1fr=（网格宽度-2em-网格宽度*24%）/2
总的来说，fr运用于grid布局中是一个非常方便的单位。
标签：col temp 简单的 flexbox 字体 w3c 拓展 因此 怎样
原文地址：https://www.cnblogs.com/lilinhan/p/9780401.html
