、等等。盒子包含了一個元素的內容，以及可選的邊框、填充、邊距等屬性。在頁面布局中，我們可以使用盒子模型來控制元素的位置和大小。

.box {
width: 200px; /* 盒子的寬度 */
height: 150px; /* 盒子的高度 */
border: 1px solid #ccc; /* 邊框樣式：solid表示實線，#ccc是顏色值 */
padding: 10px; /* 內邊距，盒子內容到邊框的距離 */
margin: 20px; /* 外邊距，盒子到相鄰元素的距離 */
}

一個盒子包括以下部分：

• Content：盒子中的內容，比如文字、圖片等等。
• Padding：內邊距，盒子內容到邊框的距離。
• Border：邊框，包括寬度、樣式、顏色等屬性。
• Margin：外邊距，盒子到相鄰元素的距離。

盒子有兩種常用的布局方式：

• Block：塊級盒子，從上到下垂直排列，可以設置寬度和高度。比如
  、

  等元素就默認是塊級盒子。

• Inline：行級盒子，水平排列，寬度由內容決定，高度自動撐開。比如、等元素就默認是行級盒子。

盒子的使用非常靈活，可以用它來實現各種布局效果，如網格布局、垂直居中、響應式布局等等。掌握好盒子模型的相關知識，可以讓我們的頁面更加美觀、專業。