在網站的排版設計中，經常會遇到需要將盒子按照一定比例劃分的情況。這時候就需要使用CSS的土方計算了。

所謂土方計算，就是將一個容器按照寬高比例劃分成若干個盒子。而CSS的計算方法則是通過給父元素設置“position: relative”屬性，再通過子元素的“position: absolute”和“top/bottom/left/right”四個屬性來實現。

下面是一個例子：

/* 父元素 */
.container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;  /* 16:9的寬高比例，可根據需要修改 */
}
/* 子元素1 */
.box1 {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: #f00;
}
/* 子元素2 */
.box2 {
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background-color: #0f0;
}

上述代碼的效果是將一個寬高比例為16:9的容器劃分成兩個相等的盒子，分別為紅色和綠色。

需要注意的是，父元素必須設定高度為0，然后通過padding-bottom屬性來指定容器的比例。子元素的百分比則是相對于父元素的寬度計算的。

在實際運用中，通過不同的寬高比例和不同數量的子元素，可以實現各種形式的布局設計。這一方法已經成為了現代網站設計中不可或缺的一個技術。