CSS中的盒子模型是網(wǎng)頁(yè)設(shè)計(jì)中非常重要的一個(gè)概念。盒子模型是指將一個(gè)元素看成一個(gè)方形的盒子，我們可以通過(guò)調(diào)整盒子模型的屬性來(lái)定義該元素在頁(yè)面中占用的空間大小。 盒子模型主要包含四個(gè)要素，分別是內(nèi)容(content)、內(nèi)邊距(padding)、邊框(border)和外邊距(margin)。 下面一段代碼展示了一個(gè)典型的盒子模型：

p {
width: 200px; /* 寬度 */
height: 100px; /* 高度 */
padding: 20px; /* 內(nèi)邊距 */
border: 2px solid black; /* 邊框 */
margin: 10px; /* 外邊距 */
}

首先我們定義了該盒子模型的寬度和高度，分別是200px和100px。接著我們?cè)O(shè)置了內(nèi)邊距為20px，也就是在該盒子模型內(nèi)部留出了20px的空間。然后我們?cè)O(shè)置了邊框?yàn)?px的黑色實(shí)線邊框，最后我們?cè)O(shè)置了外邊距為10px，這樣該盒子模型會(huì)與周?chē)脑禺a(chǎn)生10px的間距。 這四個(gè)要素可以被進(jìn)一步的細(xì)分為兩組：內(nèi)容與內(nèi)邊距、邊框與外邊距。內(nèi)容指的是該盒子模型所包含的實(shí)際內(nèi)容，內(nèi)邊距指的是在對(duì)象與內(nèi)容之間留出的空白區(qū)域。邊框指的是盒子模型的邊框，外邊距指的是盒子模型與其他元素之間的空白區(qū)域。 我們可以通過(guò)設(shè)置盒子模型的屬性來(lái)控制這四個(gè)要素的大小。例如我們可以通過(guò)設(shè)置padding屬性來(lái)調(diào)整內(nèi)邊距的大小，也可以通過(guò)設(shè)置margin屬性來(lái)調(diào)整外邊距的大小。 掌握盒子模型的要素是CSS網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)，精通盒子模型的使用可以讓你在網(wǎng)頁(yè)設(shè)計(jì)方面更加得心應(yīng)手。