CSS中的盒子模型是指在HTML中，每一個(gè)元素都可以看作是一個(gè)盒子，包括了元素本身、元素的外邊距、邊框和內(nèi)邊距等。然而，在實(shí)際的開發(fā)中，我們常常會(huì)遇到一個(gè)問題，那就是某些元素的盒子會(huì)被撐大，導(dǎo)致頁(yè)面顯示不正常。這時(shí)，我們可以使用CSS來設(shè)置元素的盒子不被撐大。

首先，我們需要了解一個(gè)CSS屬性，即box-sizing。這個(gè)屬性可以設(shè)置元素的盒子模型是使用標(biāo)準(zhǔn)的W3C盒子模型還是使用IE盒子模型。默認(rèn)情況下，box-sizing是content-box，即使用W3C盒子模型。而使用content-box模型時(shí)，一個(gè)元素的盒子模型是由content、padding和border三個(gè)部分組成的，width和height只會(huì)計(jì)算content的寬度和高度，而不會(huì)計(jì)算padding和border的尺寸。

為了避免元素被撐大，我們可以使用box-sizing: border-box。這時(shí)，元素的盒子模型將由content、padding和border共同組成，width和height會(huì)計(jì)算包括padding和border在內(nèi)的尺寸。

.example {
box-sizing: border-box;
}

除此之外，還有一個(gè)常見的問題是圖片會(huì)撐大父元素的盒子。這時(shí)，我們可以通過設(shè)置圖片的max-width屬性，來限制圖片的寬度不會(huì)超過父元素的寬度。

.example img {
max-width: 100%;
}

通過以上兩種方式，我們可以有效地避免元素的盒子被撐大，從而讓頁(yè)面顯示更加正常。