px：像素，它是顯示屏上顯示的每一個小點，為顯示的最小單位。它是一個絕對尺寸單位，是不能變動的。

例：

.content {
height: 150px;
}

em：1em 等於當前的字體尺寸，2em 等於當前字體尺寸的兩倍。

瀏覽器中的文本一般默認為16px，也就是說，默認的情況下：1em=16px。

在css中，如果一個元素沒有設置font-size，那麽它的front-size值就是它的父元素的font-size。

缺點：在不設置元素font-size的情況下，em總是根據父元素的font-size來確定長度；即使元素設置了font-size，多次嵌套使用em也往往會造成疏忽，不僅使用前需要大量計算，而且不能保證沒有漏網之魚。這將是一個繁雜而低效率的工作。

rem：它是描述相對於當前根元素字體尺寸，除了描述對象與em不同其余都和em一樣。

當em出現多重繼承的時候，字體的大小控制就會變得很麻煩，rem的出現就是為了克服這一缺點。

rem與em的區別：

html：

<div class="parents">
　　<div class="em-demo">設置長度為5em demo</div>
　　<div class="rem-demo">設置長度為5rem demo</div>
</div>

css：

從圖上我們可以看出：設置5em的div的第一行字符剛好為5個字符大小，它是相對於當前元素字體的尺寸， 寬度占用90px，5 X 18 = 90px。設置5rem的div第一行字符要小一些，它是相對於根元素字體大小（默認為瀏覽器大小16px），比18px要小一些，寬度占用80px，5 X 16 = 80px。

fr：一個自適應單位，fr單位被用於在一系列長度值中分配剩余空間，如果多個已指定了多個部分，則剩下的空間根據各自的數字按比例分配。

例：

　　.grid{

　　　display: grid;

　　　grid-template-columns: repeat(4, 1fr);

　　　grid-column-gap: 10px;

}

Web第六周作業：css單位