在 CSS 中，每個 HTML 元素都被視為一個矩形盒子。這個盒子包含了元素的內容、內邊距、邊框和外邊距。我們稱之為盒模型結構。

盒模型結構主要分為兩種標準：

1. W3C 盒模型（content-box）：指定的寬度和高度僅僅包含內容，不包含內邊距、邊框和外邊距，如下圖所示：
CSS box model w3c content-box 
2. IE 盒模型（border-box）：指定的寬度和高度包含了內容、內邊距和邊框，但并不包含外邊距，如下圖所示：
CSS box model ie border-box

下面我們來詳細介紹每個部分。

內容（content）：這是元素所包含的實際內容，如文字和圖片。它的大小由 width 和 height 屬性設置。

內邊距（padding）：指的是內容和邊框之間的空白區域，可以使用 padding 屬性進行設置。這個空白區域內的背景色也可以通過 background-color 屬性來設置。

邊框（border）：圍繞內容和內邊距的線條。可以使用 border 屬性進行設置，其屬性值包括寬度、樣式和顏色。

外邊距（margin）：指的是盒子與相鄰元素之間的空白區域，可以使用 margin 屬性進行設置。這個空白區域中并沒有背景色。

在實際開發中，我們可以使用 box-sizing 屬性來改變盒模型的默認行為。它有兩個值，分別為 content-box 和 border-box。并且，我們可以通過設置元素的 display 屬性為 inline-block 來將其轉換為盒模型，從而更好地控制元素的大小和位置。

.box {
width: 200px;
height: 100px;
padding: 10px;
border: 2px solid blue;
margin: 20px;
box-sizing: border-box;
display: inline-block;
}

以上就是 CSS 盒模型結構的基本概念和屬性，值得我們在實踐中去深入理解和運用。