CSS中的盒子抽象是指利用CSS樣式來定義HTML頁面中的元素盒子的一種概念。一個盒子包括有內容、內邊距、邊框和外邊距四個部分。在CSS中，可以通過定義盒模型來控制這些部分的大小和樣式，從而達到更好的頁面布局。

div {
width: 200px;
height: 200px;
padding: 10px;
border: 1px solid #000;
margin: 20px;
}

上述代碼表示一個div元素的盒模型，定義其寬和高都為200px，內邊距為10px，邊框為1px粗的黑色實線，外邊距為20px。這個盒子的總寬度為242px（200+2*10+2*1+2*20），總高度為242px（同理）。

利用盒子抽象的概念，可以更好地控制和布局頁面中的元素。例如，在網頁布局中，通常會將一個頁面分成數個區域，在每個區域內定義一個盒子，通過控制這些盒子的大小和樣式，達到更好的頁面效果。

.header {
width: 100%;
height: 100px;
background-color: #ccc;
}
.content {
width: 80%;
height: 500px;
margin: 0 auto;
}
.footer {
width: 100%;
height: 50px;
background-color: #eee;
}

上述代碼表示一個網頁布局的盒模型定義。header區域的盒子高度為100px，背景色為灰色；content區域的盒子寬度為80%，高度為500px，并且居中對齊；footer區域的盒子高度為50px，背景色為淺灰色。通過這樣的盒模型定義，可以得到一個簡單美觀的網頁布局。

總之，盒子抽象是CSS中非常重要的一個概念，通過盒模型的控制，可以更好地實現網頁的布局和排版，達到更好的頁面效果。