CSS盒子占比布局是Web開(kāi)發(fā)中常用的一種布局方法。它基于盒子模型，通過(guò)給不同的盒子設(shè)置寬度、高度、邊距和填充來(lái)實(shí)現(xiàn)布局。其中，盒子的寬度和高度是由盒子占父容器的百分比決定的。

.container {
width: 100%;
height: 400px;
display: flex;
justify-content: space-between;
}
.box-1 {
width: 20%;
padding: 20px;
margin-right: 10px;
background-color: red;
}
.box-2 {
width: 70%;
padding: 20px;
background-color: green;
}

在上面的代碼中，我們定義了一個(gè)父容器.container和兩個(gè)子容器.box-1和.box-2。其中，父容器的寬度是100%，高度是400px，采用了彈性布局。子容器.box-1的寬度是父容器寬度的20%，設(shè)置了填充和邊距，背景顏色為紅色。子容器.box-2的寬度是父容器寬度的70%，同樣設(shè)置了填充，背景顏色為綠色。

通過(guò)以上的代碼，我們實(shí)現(xiàn)了一個(gè)左側(cè)寬度為20%，右側(cè)寬度為70%，中間留有一定的距離的布局效果。

采用CSS盒子占比布局可以讓W(xué)eb開(kāi)發(fā)者更加靈活地布局頁(yè)面，實(shí)現(xiàn)各種多樣化的布局效果。