HTML的盒子模型是一種設計網頁布局的基本概念，它將HTML元素視為矩形盒子，這些盒子由以下四個基本部分組成：
內容區域（Content）：盒子的實際內容，例如文本、圖片或其他嵌套的HTML元素。
內邊距（Padding）：內容區域與框線之間的空白區域，可以通過CSS的padding屬性設定大小。
框線（Border）：內邊距之外的一條線，圍繞著內容區域和內邊距，可以通過CSS的border屬性設定樣式、寬度和顏色。
外邊距（Margin）：框線之外的空白區域，用於與其他元素之間的間距，可以通過CSS的margin屬性設定大小。
盒子模型的尺寸計算方式如下：
盒子的總寬度 = 左框線寬度 + 左內邊距寬度 + 內容寬度 + 右內邊距寬度 + 右框線寬度
盒子的總高度 = 上框線高度 + 上內邊距高度 + 內容高度 + 下內邊距高度 + 下框線高度
當設定盒子的寬度和高度時，這些尺寸值包括了框線和內邊距的大小。默認情況下，盒子模型是以普通流模式（Normal Flow）進行布局，元素按照其在HTML文檔中出現的順序從上到下排列。可以使用CSS的定位屬性（如position）和布局技術（如浮動、彈性盒子、格線布局）來改變元素的位置和流動方式。
通過調整盒子模型的屬性，開發者可以控制盒子的尺寸、邊距和框線樣式，以實現所需的頁面布局和設計效果。CSS3還引入了box-sizing屬性，允許開發者指定盒子模型的種類，如content-box（標準盒模型）和border-box（IE盒模型），這影響了元素的總寬度和高度的計算方式。