HTML 盒子模型是前端開發(fā)中常用的概念，它將 HTML 元素看作是一個矩形的盒子，包含內(nèi)容、內(nèi)邊距、邊框和外邊距四個部分。利用 CSS 屬性，我們可以控制 HTML 盒子的各個部分，并使用盒子套盒子的方式實(shí)現(xiàn)不同的布局效果。

<div>
<div>
<p>內(nèi)部盒子</p>
</div>
</div>

上面的代碼實(shí)現(xiàn)了一個盒子套盒子的樣式，整體包含一個父級 div，內(nèi)部又包含一個子級 div。在子級 div 中包含一個 p 標(biāo)簽，作為盒子內(nèi)的內(nèi)容。例如，可以利用這種方式設(shè)置不同的背景顏色與邊框以及邊距：

div {
width: 200px;
height: 200px;
background-color: #CCC;
border: 1px solid #999;
padding: 10px;
margin: 10px;
}
div div {
width: 100px;
height: 100px;
background-color: #FFF;
border: 1px solid #999;
padding: 10px;
margin: 10px;
}

上面的樣式代碼實(shí)現(xiàn)了一個內(nèi)部白色盒子，外圍灰色盒子的效果，并設(shè)置了內(nèi)外邊距以及邊框。通過套用不同的 div 盒子以及調(diào)整樣式屬性可實(shí)現(xiàn)更多的布局和效果。