在網頁設計中，我們經常會遇到需要讓元素占滿剩余空間的情況。例如，在一個導航欄中，我們需要讓每個選項均勻地占據整個導航欄的寬度。這時，CSS提供了幾種方法讓元素占滿剩余空間。

方法一：float + margin

.nav {
width: 100%;
overflow: hidden;
}
.nav li {
float: left;
margin-right: -4px; /* 修正浮動元素之間的間距 */
}
.nav li a {
display: block;
padding: 10px;
}

這種方法的原理是使用float浮動屬性讓元素脫離文檔流，并使用margin負值來調整元素之間的間距。但是需要注意一點，如果元素的寬度不相等，由于margin的負值會根據元素的寬度不同而產生不同的效果，可能導致元素的寬度不一致。

方法二：flexbox布局

.nav {
display: flex;
justify-content: space-between;
}
.nav li a {
padding: 10px;
}

flexbox布局是CSS3中新加入的布局方式，它使用彈性伸縮盒子來布局，可以方便地實現元素之間的對齊和占滿剩余空間。其中，justify-content: space-between;屬性可以使元素均勻地分布在容器中，占據全部寬度。

方法三：calc()

.nav li {
width: calc(100% / 5 - 4px);
/* 
計算每個元素的寬度，5為元素個數，其余部分為調整實際顯示寬度時使用的像素值 
*/
}

calc()函數是CSS3中新增的一個函數，可以用于計算元素的寬度、高度等屬性。在這種情況下，我們可以使用calc()函數根據元素數量和間距調整元素寬度，來實現均勻占據剩余空間的效果。