CSS盒子模型是前端開發中最基礎的概念之一，也是設計時需要注意的重點。下面是一些常用的CSS盒子代碼，希望能為大家提供有用的參考。

1. 傳統盒子模型

.box {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #333;
margin: 10px;
}

這段代碼表示一個寬度為200px，高度為100px的盒子，內部有20px的內邊距（padding），外部有5px的邊框（border），與其他元素之間有10px的外邊距（margin）。

2. W3C盒子模型

.box {
box-sizing: border-box;
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #333;
margin: 10px;
}

W3C盒子模型是CSS3中的新特性，它的特點是content部分的寬高不再是指定的寬度和高度，而是減去了padding和border的值，使得開發者更容易控制元素的大小。

3. 固定寬度，高度自適應

.box {
width: 200px;
height: auto;
border: 1px solid #333;
overflow: hidden;
margin: 10px;
}

這種情況下，盒子的寬度固定為200px，高度自適應，內部內容超出盒子高度時會隱藏。

4. 固定高度，寬度自適應

.box {
width: auto;
height: 100px;
border: 1px solid #333;
overflow: hidden;
margin: 10px;
}

這種情況下，盒子的高度固定為100px，寬度自適應，內部內容超出盒子寬度時會隱藏。

5. 特定寬度高度比例的盒子

.box {
width: 200px;
height: 100px;
background: url('image.jpg') center/cover;
margin: 10px;
}

這種情況下，盒子的寬度和高度都已經指定，但是內部的背景圖片要按比例填充，使用了CSS3的background屬性。

以上是一些常見的CSS盒子模型代碼，可以根據實際情況進行選擇和修改。