CSS（Cascading Style Sheets）是用于網頁樣式設計的語言。盒子模型是CSS中布局的基礎。它描述了元素在瀏覽器視圖中的尺寸和位置。CSS盒模型由四個部分組成：content、padding、border和margin。

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

content是盒子中實際包含內容的部分。padding是元素和邊框之間的空間。border是元素的邊框。margin是盒子周圍的空間，它控制元素與其他元素之間的距離。

盒子模型的寬度和高度可以通過設置content的width和height屬性來控制。padding和border會增加元素的寬度和高度，同時margin也會使盒子變得更大。

可以使用box-sizing屬性來控制盒子在計算寬度和高度時是否包括padding和border。如果使用值為border-box，那么元素的寬度和高度是包括border和padding在內的。如果使用值為content-box，那么元素的寬度和高度只包括content部分。

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

盒子模型在CSS布局中扮演著至關重要的角色。了解盒子模型可以幫助你更好地理解CSS的布局技術，并能夠更好地控制網頁元素之間的間隔和排列。