CSS盒子模型是指在Web設(shè)計中，將HTML元素看做矩形盒子，每個盒子有四個邊框，它們可以包含其它盒子，如文本、圖片等，是CSS排版的基礎(chǔ)。盒子模型在CSS中也是非常重要的概念。

/* CSS盒子模型語法： */
element {
box-sizing: content-box; /*默認(rèn)*/
box-sizing: border-box;
width: value;
height: value;
padding: value;
border: value;
margin: value;
}

上面是CSS盒子模型的相關(guān)CSS樣式設(shè)置，其中box-sizing屬性是影響盒子大小的關(guān)鍵。默認(rèn)值是content-box，它僅包含元素的內(nèi)容，而不包括padding、border和margin。當(dāng)設(shè)置為border-box時，元素的寬度和高度屬性不僅僅是內(nèi)容的寬度和高度，同時還包括了padding和border的寬度。

下面就給大家介紹一個例子，以更好地理解盒子模型：

/* HTML代碼： */
<div>
<p>這是一段段落文字</p>
</div>
/* CSS代碼： */
div {
width: 300px;
height: 100px;
padding: 20px;
border: 1px solid #000;
margin: 10px;
}

上述代碼中，我們設(shè)置了一個長寬為300px和100px的div盒子，并為它設(shè)置了20px的padding，以及1px的黑色實線邊框和10px的外邊距。這時候你會發(fā)現(xiàn)，整個div盒子的大小是342px * 142px，這是因為包括了padding、border和margin的寬度。

最后再指出一點：盒子模型在瀏覽器兼容性問題上存在爭議，大家在編寫時可以根據(jù)實際使用情況做相應(yīng)的處理。