请解释 CSS 盒模型的概念，并说明如何计算一个元素在页面中实际占据的宽度和高度。

答题要点

推荐答题框架：先阐述盒模型的组成，再说明计算方法。关键要点：1. 盒模型组成，包括内容区（content）、内边距（padding）、边框（border）和外边距（margin）。内容区是元素实际显示的内容，内边距是内容区与边框之间的距离，边框围绕内容和内边距，外边距是元素与其他元素之间的距离。2. 宽度计算，元素实际宽度 = 内容区宽度 + 左右内边距 + 左右边框。例如，内容区宽 100px，左右内边距各 10px，左右边框各 1px，则实际宽度为 122px。3. 高度计算，元素实际高度 = 内容区高度 + 上下内边距 + 上下边框。示例思路：首先明确盒模型由四部分组成，然后根据公式分别计算宽度和高度，计算时要注意各部分的取值。