CSS布局系統是一組用于定義和控制網頁布局的工具集合，它們包括了各種元素和屬性，能夠幫助開發者更好地設計和構造網頁。

最基本的CSS布局系統是盒式布局，它將HTML元素視為方盒子，在頁面上排列組合。通過設置這些盒子的寬度、高度、邊距、內邊距等屬性，我們可以實現各種不同的網頁布局。

下面是一個使用CSS盒式布局實現的簡單網頁布局示例：

<style>
.container {
width: 80%;
margin: 0 auto;
}
.header, .footer {
height: 50px;
padding: 10px;
background-color: #eee;
}
.content {
height: 400px;
padding: 20px;
background-color: #fff;
}
</style>
<div class="container">
<div class="header">
<h1>這是頁面頭部</h1>
</div>
<div class="content">
<p>這是頁面內容</p>
</div>
<div class="footer">
<p>這是頁面底部</p>
</div>
</div>

在上面的示例中，我們定義了一個名為container的容器，將整個頁面的布局控制在了80%的寬度內，同時將其居中顯示。我們還定義了一個名為header的盒子和一個名為footer的盒子，用來分別顯示頁面的頭部和底部。這些盒子的高度、內邊距和背景顏色均已設置。最后，我們定義了一個名為content的盒子，用來顯示頁面的主要內容，同時設置了其高度、內邊距和背景顏色。

通過使用CSS布局系統，我們能夠在不使用表格布局、絕對定位或JavaScript等進階技術的情況下，實現各種不同的網頁布局，從而更好地展示和傳達我們的網頁內容。