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号