CSS盒子模型是前端開發中常用的一種布局方式。盒子模型將每一個頁面元素看成是一個獨立的盒子，通過指定盒子的尺寸、邊框、內邊距和外邊距等屬性來控制盒子的布局。 下面我們來看一個簡單的實例，演示如何使用CSS盒子模型實現圖文混排布局。首先，我們在HTML中定義一個包含文字和圖片的容器：

<div class="container">
<img src="example.jpg" alt="example image">
<p>這里是文字描述...</p>
</div>

然后，在CSS中設置該容器的樣式：

.container{
width: 300px;     /*設置容器寬度*/
border: 1px solid #ccc;   /*設置容器邊框*/
padding: 10px;    /*設置容器內邊距*/
margin: 10px auto;     /*設置容器外邊距*/
}
.container img{
float: left;   /*圖片左浮動，文字自動對齊*/
margin-right: 10px;   /*設置圖片右外邊距*/
}

這樣，我們就完成了一個簡單的圖文混排布局。通過盒子模型的尺寸、邊框、內邊距和外邊距等屬性的靈活運用，我們可以輕松地實現多種復雜的布局效果。