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。

?

轉載于:https://www.cnblogs.com/ceneasy/p/9762751.html

總結

以上是生活随笔為你收集整理的CSS单位分析及CSS颜色表示法、颜色表（调色板）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。