CSS標準盒模型是頁面開發中一個非常重要的概念，也是掌握CSS布局的基礎知識。它定義了HTML元素在網頁中所占的空間，并包括元素的內邊距、邊框和外邊距。

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

在標準盒模型中，一個元素的總寬度和高度由四個部分構成，分別是：

• 內容框：包含元素的實際內容，通常可以設置寬度和高度。
• 內邊距：指內容框與邊框之間的距離，可以設置padding。
• 邊框：包圍內容框和內邊距，可以設置border。
• 外邊距：指邊框和相鄰元素之間的距離，可以設置margin。

以一個寬為200px、高為100px的元素為例，如果設置了20px的內邊距和1px的邊框，再加上10px的外邊距，那么這個元素實際占用的空間大小就是：

寬度：200 + 20*2 + 1*2 + 10*2 = 262px
高度：100 + 20*2 + 1*2 + 10*2 = 162px

需要注意的是，標準盒模型只適用于CSS2及以上版本，而早期的IE瀏覽器采用的是IE盒模型，它會額外地將元素的邊框和內邊距計算進元素的寬高中，導致元素的實際大小和我們預期的不符。

在實際開發過程中，我們通常會使用CSS的box-sizing屬性控制盒模型的計算方式，可以取以下三個值：

• content-box：默認值，表示寬高只包含內容框。
• border-box：表示寬高包含內容框、內邊距和邊框。
• inherit：繼承父元素的盒模型計算方式。

總之，標準盒模型是CSS布局的基礎，了解并掌握它的計算方式和使用方法，對于開發高質量的網頁非常重要。