在網頁設計中，盒模型是非常重要的概念。在CSS中，一共有四種盒模型，分別是標準盒模型、IE盒模型、W3C盒模型和IE8以上的怪異盒模型。

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

標準盒模型是指width和height只包括內容，不包括border和padding。也就是說，如果設置一個寬為200px、高為100px的盒子，再加上10px的邊框和20px的內邊距，最后寬度為240px，高度為140px。代碼如下：

.box {
box-sizing: content-box;
}

IE盒模型是指width和height包括border和padding，但是在IE低版本中，計算寬度和高度并不準確。同樣是寬為200px、高為100px的盒子，再加上10px的邊框和20px的內邊距，最后寬度為200px，高度為100px。代碼如下：

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

W3C盒模型是指width和height包括border和padding，和IE盒模型不同的是，W3C盒模型計算寬度和高度的方式更符合邏輯，但在一些情況下會導致不必要的麻煩。同樣是寬為200px、高為100px的盒子，再加上10px的邊框和20px的內邊距，最后寬度為240px，高度為140px。代碼如下：

.box {
box-sizing: padding-box;
}

IE8以上的怪異盒模型是指對于table元素，使用了W3C盒模型，而其他元素使用IE盒模型。這種盒模型在實際情況中應盡量避免使用。同樣是寬為200px、高為100px的盒子，再加上10px的邊框和20px的內邊距，最后寬度為200px，高度為100px。代碼如下：

.table {
box-sizing: content-box;
}
.box {
box-sizing: border-box;
}

在實際項目中，根據不同情況選擇不同的盒模型非常重要。如果想要更符合邏輯的盒模型，可以使用W3C盒模型。如果要兼容老版本的IE瀏覽器，可以使用IE盒模型。而現代瀏覽器基本上都支持標準盒模型，可以根據實際需要進行選擇。