CSS盒子模型是網頁設計中很重要的一個概念。它描述了一個元素在網頁中所占據的空間，包括元素的內容、內邊距、邊框和外邊距等。

其中，針對盒子模型的寬度和高度，CSS設置了兩種基本的屬性：width和height。這兩個屬性分別控制了元素的寬度和高度，包括元素的內容區域。如果需要調整元素的內邊距、邊框和外邊距的大小，我們需要使用其他屬性，如padding、border和margin等。

.box {
width: 200px;
height: 100px;
padding: 10px;
border: 1px solid black;
margin: 20px;
}

上面的代碼定義了一個class為box的元素，并設置了它的寬度為200像素，高度為100像素。這個元素還設置了10像素的內邊距、1像素的邊框和20像素的外邊距。

由于CSS盒子模型中的元素的寬度和高度并不是僅僅包括了內容區域，而是包括了內容區域、內邊距、邊框和外邊距等。因此，當我們設置元素的寬度和高度時，最終顯示的大小往往與我們預期的不一樣。

.box {
width: 200px;
height: 100px;
padding: 10px;
border: 1px solid black;
margin: 20px;
box-sizing: border-box;
}

我們可以使用box-sizing屬性來解決這個問題。該屬性有兩個值：content-box和border-box。默認為content-box。如果設置為border-box，元素的寬度和高度就包括了內邊距和邊框的大小。

上面的代碼示例中，我們將box-sizing屬性設置為border-box，這樣就可以讓元素按我們預期的大小進行展示了。