CSS布局是前端開發中非常重要的一部分，通過合理運用CSS布局可以使網站的界面呈現出更加美觀、合理的排版。在CSS布局中，距離、大小、字體等元素的單位有許多種，其中1 rem作為相對單位被越來越多的開發者所使用。

body {
font-size: 16px; /* 設置根元素的字體大小 */
}
.box {
width: 20rem; /* 在不同設備上具有相同的長度 */
height: 10rem; 
font-size: 1.5rem; /* 根據根元素字體大小設置自身字體大小 */
margin: 1rem; /* 根據根元素字體大小設置自身外邊距 */
}

在上述代碼中，我們可以看到在body中設置了根元素的字體大小為16px，然后在.box樣式中設置了自身長度為20rem，高度為10rem，字體大小為1.5rem，外邊距為1rem。此時的rem實際上是相對于根元素的字體大小來計算的，所以無論設備的分辨率多大，.box元素的寬度都會是20個根元素字體大小的長度。

使用1rem作為單位的優點在于可以使網站的布局在不同分辨率的設備上保持相同的外觀效果，同時還可以使開發者更加靈活地調整樣式，提高頁面設計的效率。