在進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)時(shí)，CSS中寬度屬性是非常常用的一個(gè)屬性，可以用來(lái)控制元素的寬度。但有時(shí)我們會(huì)發(fā)現(xiàn)無(wú)論怎樣設(shè)置寬度，元素的寬度似乎總是受到其內(nèi)容區(qū)域的限制，無(wú)法達(dá)到我們想要的效果。

這是因?yàn)樵貙挾扔扇齻€(gè)部分構(gòu)成：內(nèi)容區(qū)域、內(nèi)邊距和邊框，稱之為盒子模型。我們?cè)O(shè)置的寬度只控制了內(nèi)容區(qū)域的寬度，而被邊框和內(nèi)邊距“包圍”的內(nèi)容區(qū)域會(huì)讓元素整體變得更寬。

.box {
width: 200px;
padding: 10px;
border: 1px solid #ccc;
}
<div class="box">
這里是內(nèi)容區(qū)域
</div>

在上述代碼中，我們?cè)O(shè)置了一個(gè)200像素寬的盒子，但加上10像素的內(nèi)邊距和1像素的邊框后，這個(gè)盒子實(shí)際上會(huì)變成222像素寬。因此，當(dāng)我們需要控制整個(gè)盒子的寬度時(shí)，需要先計(jì)算好要包含的所有元素的總寬度，再加上對(duì)應(yīng)的內(nèi)邊距和邊框?qū)挾取＿@樣就能確保元素寬度不會(huì)超出我們想要的范圍了。