CSS塊元素背景占滿列表的效果非常實(shí)用，可以讓網(wǎng)頁(yè)的排版更加美觀大方。那么，如何實(shí)現(xiàn)這種效果呢？我們來(lái)看下面的代碼示例：

ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
background-color: #eee;
padding: 10px;
margin: 10px;
}

這是一個(gè)非常基本的無(wú)序列表（ul）和列表項(xiàng)（li）的樣式設(shè)置。我們可以看到，每個(gè)列表項(xiàng)都有一定的內(nèi)邊距和外邊距，并且設(shè)置了背景顏色。

接下來(lái)，我們需要使用CSS3的新特性——box-sizing。這個(gè)特性能夠讓我們更加靈活地定義元素的尺寸和邊框，而不用擔(dān)心內(nèi)邊距和邊框會(huì)影響元素的實(shí)際大小。具體代碼如下：

li {
background-color: #eee;
padding: 10px;
margin: 10px;
box-sizing: border-box;
}

接下來(lái)，我們就需要設(shè)置每個(gè)列表項(xiàng)的高度了。這里我們選擇使用calc()函數(shù)來(lái)計(jì)算高度，代碼如下：

li {
background-color: #eee;
padding: 10px;
margin: 10px;
box-sizing: border-box;
height: calc(100% - 20px);
}

這一行代碼看起來(lái)有些神奇，但實(shí)際上是通過(guò)計(jì)算每個(gè)列表項(xiàng)的高度來(lái)實(shí)現(xiàn)填充整個(gè)容器。使用calc()函數(shù)時(shí)，我們可以將百分比和像素值混合使用，并進(jìn)行加減乘除等計(jì)算。這里我們將100%減去上下的20像素（內(nèi)邊距和外邊距），就能夠得到每個(gè)元素的實(shí)際高度。

最后，我們只需要將容器的高度設(shè)置為固定值，即可讓每個(gè)列表項(xiàng)填滿整個(gè)容器。具體代碼如下：

ul {
list-style: none;
padding: 0;
margin: 0;
height: 300px;
display: flex;
flex-wrap: wrap;
}
li {
background-color: #eee;
padding: 10px;
margin: 10px;
box-sizing: border-box;
height: calc(100% - 20px);
flex-grow: 1;
}

在上面的代碼中，我們還添加了display: flex和flex-wrap: wrap屬性，使得容器可以根據(jù)實(shí)際內(nèi)容自動(dòng)換行，從而適應(yīng)不同屏幕大小。至此，我們就成功地將CSS塊元素背景占滿列表的效果實(shí)現(xiàn)了。