對于前端開發中的網頁頁面布局版式設計，在CSS中使用盒子模型進行樣式設計是非常常見的操作。

首先，在HTML中使用div或者section等容器元素作為頁面的主要布局區域。 然后，在CSS中使用width、height、margin、padding等樣式屬性對布局容器進行設置。

.container{
width: 960px;
margin: 0 auto;
/*設置容器寬度為960px，通過margin:0 auto實現居中效果*/
padding: 20px;
/*設置容器內部邊距為20px*/
}

同時，CSS也提供了flex布局和grid布局等CSS3新特性，可以更加靈活地實現網頁頁面布局設計。

.container{
display: flex;
flex-wrap: wrap;
justify-content: center;
/*通過flex布局實現內容的自適應和居中對齊*/
}
.item{
flex-basis: 200px;
/*設置每個子元素的基礎寬度為200px*/
margin: 10px;
}

除此之外，響應式布局也是現代網頁設計的重要方向。通過使用CSS媒體查詢等方法，在不同終端設備上自適應地展示不同的布局版本。

.container{
width: 100%;
margin: 0;
padding: 0;
}
.item{
flex-basis: calc(50% - 20px);
/*通過calc函數計算每個子元素的寬度*/
margin: 10px;
}
@media screen and (max-width: 480px){
.item{
flex-basis: 100%;
/*在小屏幕下，每個子元素占據一行*/
}
}

綜上所述，CSS對于網頁頁面的布局版式設計至關重要，掌握常規的盒子模型和常用的布局方法，將會極大提升前端開發者的設計能力。