在CSS中，我們常常需要設置元素的長度來達到我們需求的效果。設置元素長度的方式有很多種，如像素(px)、百分比(%)、em、rem等等。在使用這些單位時，我們需要了解它們之間的區別與聯系。

/* 像素 */
.box{
width: 200px;
height: 100px;
}
/* 百分比 */
.box{
width: 50%;
height: 50%;
}
/* em */
.box{
font-size: 16px;
width: 10em; /* 10em = 160px */
}
/* rem */
html{
font-size: 16px;
}
.box{
width: 10rem; /* 10rem = 160px */
}

在以上代碼中，我們分別使用了像素、百分比、em、rem四種單位來設置元素長度。像素是固定的長度單位，可以精確控制元素的大小，但縮放可能會影響頁面布局。百分比相對于父元素計算，不需要考慮縮放問題，但會受到父元素的限制。em和rem都是相對于頁面中的字體大小計算，與縮放無關。相比而言，em更加靈活，取決于元素所在的字體大小，rem則取決于根元素字體大小。

在實際開發中，使用哪種長度單位需要根據實際情況來決定。需要注意的是，當使用相對單位時，務必要注意元素所處的位置，以免導致計算錯誤。