在使用CSS樣式布局網頁時，經常會涉及到盒子模型的概念，盒子是網頁布局的基本單元。

盒子是由四個部分組成的，分別是：外邊距（margin）、邊框（border）、內邊距（padding）和內容區域（content）。在CSS中設置盒子的寬度和高度時，實際是設置的是整個盒子的大小，包括四個部分。

在CSS中，可以通過以下代碼創建一個帶有圖片的盒子：

.box {
width: 400px;
height: 300px;
margin: 20px;
border: 1px solid #ccc;
padding: 10px;
background-color: #f9f9f9;
}
.box img {
max-width: 100%;
height: auto;
}

以上代碼會創建一個寬度為400像素，高度為300像素，帶有外邊距、邊框、內邊距、背景顏色和圖片的盒子。其中，img標簽設置了max-width為100%，表示圖片的寬度不超過盒子的寬度，但高度會自動調整，保持原始比例。

通過盒子模型，能夠更好地控制網頁布局和元素的位置，同時也能夠優化圖片的顯示效果，提升用戶體驗。