HTML盒模型是網頁設計中的一個基本概念，它將HTML元素視為矩形的盒子，主要由以下四個部分組成：
內容(Content)：盒子的實際內容，如文本、圖片或其他HTML元素。
內邊距(Padding)：內容區域與框線之間的空白區域，用於控制內容與框線之間的距離。
框線(Border)：圍繞內容和內邊距的線條，用於定義元素的邊界，可以設定顏色、樣式和寬度。
外邊距(Margin)：框線之外的空白區域，用於控制元素與周圍元素之間的距離。
盒模型的尺寸計算方式如下：
盒子的總寬度 = 左框線寬度 + 左內邊距寬度 + 內容寬度 + 右內邊距寬度 + 右框線寬度
盒子的總高度 = 上框線高度 + 上內邊距高度 + 內容高度 + 下內邊距高度 + 下框線高度
當設定盒子的寬度和高度時，這些尺寸值包括了框線和內邊距的大小。
box-sizing屬性用於控制元素的盒模型行為，它有兩個主要值：
content-box（標準盒模型）：元素的寬度和高度只包括內容，不包括內邊距、框線和外邊距。
border-box：元素的寬度和高度包括內容、內邊距和框線，但不包括外邊距。使用border-box時，元素的寬度和高度更容易控制，因為它們包括了所有盒模型的部分。
通過調整這些屬性，開發者可以控制盒子的尺寸、邊距和框線樣式，以實現所需的頁面布局和設計效果。