CSS盒子模型由以下幾個組成部分構成：
內容區域（Content）：指的是盒子內部包含的實際內容，比如文本、圖片等。內容區域的大小由width和height屬性確定。
填充區域（Padding）：是相對于內容區域的一個可選區域，位于內容區域與邊框之間。填充區域可以使用padding-top、padding-right、padding-bottom和padding-left屬性設置，用來控制盒子的內邊距。
邊框區域（Border）：是相對于填充區域的一個可選區域，位于填充區域和外邊距之間。邊框區域可以使用border-width、border-style和border-color屬性設置，用來定義盒子的邊框樣式、寬度和顏色。
外邊距區域（Margin）：是相對于邊框區域的一個可選區域，位于邊框之外。外邊距區域用于控制盒子與其他元素之間的間距。可以使用margin-top、margin-right、margin-bottom和margin-left屬性設置。
這些組成部分一起構成了一個完整的矩形盒子，它們從內到外依次排列。CSS盒子模型的計算方式可以使用box-sizing屬性來控制，默認為content-box，即寬度和高度只包括內容區域，不包括填充、邊框和外邊距。也可以將box-sizing設置為border-box，使得寬度和高度包括了填充和邊框，但不包括外邊距。
總結起來，CSS盒子模型由內容區域、填充區域、邊框區域和外邊距區域組成，它們共同決定了盒子的大小、布局和樣式。
京公網安備 11010802030320號