在前端開發中，CSS是不可避免的一部分，常常用來控制頁面的布局和樣式，下面我們來看一下如何利用CSS創建一個簡單的盒子。

.box {
width: 200px; /* 寬度 */
height: 200px; /* 高度 */
border: 1px solid #000; /* 邊框 */
background-color: #fff; /* 背景色 */
margin: 20px; /* 外邊距 */
padding: 20px; /* 內邊距 */
}

我們通過設置盒子的寬度、高度、邊框、背景色、外邊距和內邊距等屬性，來實現盒子的基本樣式。

接下來，提供一個HTML代碼片段來展示這個盒子：

<div class="box">
<p>這是一個盒子</p>
</div>

在HTML代碼中，我們把 class 設置為 box，即樣式名稱，來引用之前在CSS中定義的屬性。

最終的效果是一個200*200大小的盒子，包含著一段文字“這是一個盒子”，并且有黑色的邊框和白色的背景色，外邊距和內邊距也分別為20px。

通過這個簡單的例子，我們了解了如何使用CSS來創建一個盒子，并且通過HTML來引用其中定義的樣式。