CSS中的塊狀元素在網頁設計中非常常見，如div、p、h1等等。但是有一個問題讓人非常頭痛，那就是無法直接設置這些元素的寬度。

<div>這是一個塊狀元素</div>

我們可以看到，以上代碼中div元素并沒有設置寬度，所以它會隨著瀏覽器窗口大小的改變而變化。有時候這并不是我們所期望的。那么為什么塊狀元素不能設置寬度呢？

這是因為Block Box Model的機制，也就是盒子模型的原理。塊狀元素的寬度 = content width + padding + border，也就是說它的寬度是由里至外依次確定的。我們可以使用box-sizing屬性來更改這個模型，如box-sizing:border-box可以使得元素的寬度包含了padding和border。

div{
width: 200px;
box-sizing: border-box;
padding: 10px;
border: 1px solid #000;
}

以上代碼中，div元素設置了200px的寬度，同時padding和border也包含在內。這樣我們就可以比較方便地控制塊狀元素的寬度了。

但是需要注意的是，采用border-box模式的時候，padding和border的寬度會影響到元素的整體大小。所以需要根據實際需求來使用。