CSS 中盒模型由哪些部分组成，如何计算元素的宽度和高度？

答题要点

CSS 盒模型由内容区（content）、内边距（padding）、边框（border）和外边距（margin）组成。内容区是元素实际显示的内容，内边距是内容区与边框之间的距离，边框围绕着内容区和内边距，外边距则是元素与其他元素之间的距离。计算元素的宽度和高度时，需要考虑不同的盒模型类型。在标准盒模型中，元素的宽度等于内容区宽度加上左右内边距和左右边框的宽度，即 width = content-width + padding-left + padding-right + border-left-width + border-right-width；高度同理，height = content-height + padding-top + padding-bottom + border-top-width + border-bottom-width。而在怪异盒模型（box-sizing: border-box）中，元素的宽度和高度包含了内容区、内边距和边框，即 width 或 height 就是设置的值，内边距和边框会从内容区中扣除。理解盒模型的组成和计算方式，对于页面布局和元素样式的控制非常重要。