CSS盒子模型是網頁布局中一個非常重要的概念，它可以幫助我們更加靈活地控制網頁中的元素。盒子模型就像是HTML元素的外殼，它有自身的大小、邊距和邊框，也可以設置元素的內邊距和外邊距。在CSS中，每個HTML元素都可以看做是一個矩形的盒子，這個盒子有四個面，它們分別是上、右、下、左四個面。

.box {
width: 100px;
height: 200px;
margin: 10px;
padding: 20px;
border: 1px solid black;
}

上面的代碼設置了一個名為box的盒子，其寬度為100像素，高度為200像素，外邊距為10像素，內邊距為20像素，邊框為1像素實心黑色線條。盒子中的內容會被包裹在內邊距中，邊框會給盒子增添一個額外的層級，而外邊距則是控制盒子元素與其它元素之間的距離。

另外一個重要的概念是坐標系。在網頁布局中，我們可以將坐標系看做是一個二維平面，該平面由x軸和y軸交錯而成。x軸通常是水平方向，而y軸則是垂直方向。在CSS中，我們可以使用position屬性來設置一個元素在坐標系中的位置。我們可以將一個元素的位置設置為相對于其父元素的位置，或者設置其在整個文檔流中的絕對位置。

.parent {
position: relative;
}
.child {
position: absolute;
top: 50px;
left: 50px;
}

在上面的代碼中，我們設置了一個名為parent的元素為相對定位，而其子元素child則是絕對定位，并且在x軸和y軸上的偏移量分別為50像素。這意味著child元素在parent元素中的位置是固定的，不會隨著頁面的滾動而改變。