盒子模型是網頁中非常重要的概念，它是用來描述HTML元素在頁面中的展示方式的模型。CSS就是利用盒子模型來控制元素的樣式，下面就以一個div為例，介紹盒子模型的相關知識。

/*CSS代碼*/
.box{
width: 200px;
height: 100px;
border: 1px solid #000;
padding: 20px;
margin: 10px;
background-color: #ccc;
}

上述的CSS代碼定義了一個名為box的div樣式，它包含了width、height、border、padding、margin、background-color這幾個屬性。

其中width和height屬性分別用于定義盒子的寬度和高度，這里的示例盒子高為100px，寬為200px。

border屬性用于定義邊框的樣式，這里設置了1像素的黑色實線邊框。

padding屬性用于定義盒子內容與邊框之間的距離，這里的示例盒子的padding為20px，也就是在盒子中留出了一塊20像素的空間。

margin屬性用于定義盒子與其他元素之間的距離，這里的示例盒子的margin為10px，也就是盒子四周留出了10像素的空間。

最后，background-color屬性用于定義盒子的背景色，這里設置了一個淺灰色的背景色。

相信通過這個例子，讀者對盒子模型有了更深刻的理解。在實際開發中，掌握盒子模型的相關知識對于設計網頁的美觀和實用性起著至關重要的作用。