CSS布局盒子是指在頁面布局中使用CSS控制盒子的大小和位置，實現美觀的界面效果。CSS布局盒子模型包括盒子內容(content)、內邊距(padding)、邊框(border)和外邊距(margin)四個部分。

.box {
/* 設置寬度和高度 */
width: 200px;
height: 200px;
/* 設置邊框樣式、寬度和顏色 */
border: 1px solid #ccc;
/* 設置內邊距 */
padding: 10px;
/* 設置外邊距 */
margin: 20px;
}

上面的代碼展示了一個具有寬度和高度、邊框、內邊距和外邊距的盒子。其中，width和height屬性分別控制盒子的寬度和高度。border屬性用于設置邊框樣式、寬度和顏色。padding屬性則用于設置內邊距，即盒子內容和邊框之間的距離。margin屬性用于設置外邊距，即盒子和其他元素之間的距離。

CSS布局盒子還可以通過設置display屬性來改變盒子的顯示方式。常用的display屬性值包括：

• block：將盒子顯示為塊級元素，占整行寬度
• inline：將盒子顯示為行內元素，寬度為內容寬度
• inline-block：將盒子顯示為行內塊級元素，寬度為內容寬度
• none：隱藏盒子

.box {
/* 將盒子顯示為行內塊級元素 */
display: inline-block;
}

上述代碼將盒子的顯示方式設置為行內塊級元素，即盒子寬度為內容寬度，但是仍然可以設置內邊距和外邊距。

CSS布局盒子還可以通過設置position屬性和top、right、bottom和left屬性來控制盒子的位置和層級。常用的position屬性值包括：

• static：默認值，元素遵循正常文檔流布局
• relative：相對定位，元素相對于其正常位置定位
• absolute：絕對定位，元素相對于其最近的已定位祖先元素定位
• fixed：固定定位，元素相對于瀏覽器窗口定位

.box {
/* 將盒子設置為絕對定位，距離頂部和左側各50像素 */
position: absolute;
top: 50px;
left: 50px;
}

上述代碼將盒子的位置設置為距離頂部和左側各50像素，同時將盒子設置為絕對定位，即元素相對于其最近的已定位祖先元素定位。