CSS盒模型（Box Model）是網頁設計中的一個基本概念，它是一種用於設計和布局的基本工具。在CSS中，幾乎所有的HTML元素都可以看作是由以下四個基本部分組成的盒子：
內容（Content）。元素本身的實際內容，位於盒子的中心。
內邊距（Padding）。內容周圍的空間，也稱為內邊距，它位於內容和框線之間。
框線（Border）。包圍內邊距的線條，用於定義元素的可視邊界。
外邊距（Margin）。框線外圍的空間，也就是盒子之間的間隔。
盒模型的尺寸計算方式：
寬度和高度。分別由內容的寬度和高度決定，不包括內邊距和框線。
總寬度和總高度。包括內容、內邊距、框線和外邊距的累計尺寸。例如，一個元素的寬度設定為300px，內邊距為10px，框線為5px，那麼其總寬度為330px（300 + 10 + 10 + 5 + 5）。
盒模型的套用不僅影響元素的外觀，還影響元素在頁面上的布局和位置。通過調整這些部分的尺寸和位置，開發者可以精確控制網頁的外觀和感覺。