HTML5和CSS是網頁開發中必不可少的兩個技術。其中盒子模型是CSS中常用的概念，它是指將HTML元素看作是一個矩形的盒子，包含了內容、內邊距、邊框和外邊距四個部分。

.box {
width: 300px;  /* 寬度 */
height: 200px; /* 高度 */
padding: 20px; /* 內邊距 */
border: 1px solid #ccc; /* 邊框 */
margin: 10px;  /* 外邊距 */
}

以上代碼定義了一個名為box的CSS類，它將在HTML元素中使用。其中，"width"和"height"分別設置了盒子的寬度和高度。"padding"定義了盒子內邊距，類似于盒子內的留白區域。"border"定義了盒子的邊框寬度、樣式和顏色。"margin"定義了盒子與周圍元素之間的空白距離，類似于外邊框。

盒子模型在網頁布局中非常重要，通過合理的使用可以實現靈活的網頁布局效果。同時，HTML5和CSS還提供了一系列的盒子模型屬性，如"box-sizing"、"border-box"等，可以幫助我們更加精細地控制盒子的尺寸和布局效果。