在CSS中，我們通常會使用rem和em作為字體大小或者元素尺寸的單位。雖然二者在表現上十分相似，但是它們在計算方式上卻有一定的差別。

p{
font-size: 16px;
}
.box{
font-size: 1rem;
width: 10em;
}

首先來看rem（root em）。rem指的是根元素的字體大小。在HTML文檔中，根元素即為html標簽。當我們設置font-size為1rem時，表示當前的字體大小和根元素的字體大小相同。例如上面的代碼中，p標簽的字體大小為16px，那么.box元素的font-size為1rem時，字體大小就是16px。

接下來看看em。em指當前元素的字體大小。當我們設置font-size為1em時，表示當前元素的字體大小和父元素的字體大小相同。例如：

.box{
font-size: 1em; /* 父元素font-size: 16px*/
width: 10em; /* 寬度為當前元素字體大小的10倍，即160px*/
}

上面的代碼中，.box元素的字體大小為1em，表示和其父元素的字體大小相同，而其父元素p標簽的字體大小為16px。因此.box元素的字體大小為16px。而width為10em，表示當前元素字體大小的10倍，即為160px。

綜上所述，em和rem在計算字體大小和元素尺寸時，所使用的參考對象不同。rem以根元素為參考，而em以父元素為參考。當我們需要在不同的層級中使用相對尺寸時，使用em可以更加靈活，而當我們需要響應式設計時，使用rem則可以更加便利。