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布局中是一个非常方便的单位。

CSS颜色表示法及调色板

1.直接采用颜色的名字，例：color:red;

2.十六进制方式，例：color：#191d11；所有#开头的都是16进制；

3.rgb（十进制，十进制，十进制）表示方法，每个值的取值范围是0~255，一共256个，为三原色（品红、黄、青）的配比，例：color:rgb(40,50,60);

4.rgba（十进制，十进制，十进制，小数0~1）：最后的a是alpha通道，表示透明度，取值范围在0~1，例：color:rgba(40,45,60,0.5);

5.hsla（色相，饱和度，亮度，透明度）；例：color:hsla(80%,80%,80%,0.6);

  a：和上面的rgba一样，表示透明度

  h：色相，表示范围0~360，如下如色环

  s：饱和度，取值范围是0.0%~100%

  l：亮度：取值范围0.0%~100%

6.transparent：透明的，表示方法为：color：transparent。