在前端開發中，經常會遇到需要使用小方塊的情況，如圖標、checkbox等。本文將介紹如何使用CSS來制作小方塊。

首先，我們需要使用CSS中的“width”和“height”屬性來設置小方塊的寬度和高度。例如，下面的代碼可以創建一個寬度和高度為20px的小方塊：

.square {
width: 20px;
height: 20px;
}

小方塊默認情況下是沒有背景顏色的，所以我們需要使用“background-color”屬性來設置背景顏色。例如，下面的代碼可以創建一個紅色的小方塊：

.square {
width: 20px;
height: 20px;
background-color: red;
}

如果需要將小方塊變成一個圓形，可以使用“border-radius”屬性。例如，下面的代碼可以創建一個半徑為10px的圓形：

.square {
width: 20px;
height: 20px;
background-color: red;
border-radius: 10px;
}

如果需要將小方塊添加邊框，可以使用“border”屬性。例如，下面的代碼可以創建一個黑色邊框的小方塊：

.square {
width: 20px;
height: 20px;
background-color: red;
border: 1px solid black;
}

最后，我們可以使用“display”屬性來控制小方塊的顯示方式。默認情況下，小方塊的display屬性為“inline-block”。如果需要將小方塊變成一個塊級元素，可以將display屬性設置為“block”。

總結：使用CSS制作小方塊，需要設置寬度和高度、背景顏色、邊框、圓角等屬性。通過控制display屬性可以改變小方塊的顯示方式。