面试题：CSS中盒模型的组成及如何在不同盒模型模式下计算元素的总宽度

Question

请阐述CSS盒模型由哪些部分组成，并且说明标准盒模型（content-box）和怪异盒模型（border-box）下，一个元素设置width为200px，padding为20px，border为5px时，其占据的总宽度分别是多少，以及如何计算得到的。

Answer 1

CSS盒模型组成部分

CSS盒模型由 content（内容）、padding（内边距）、border（边框） 和 margin（外边距）组成。

标准盒模型（content-box）

• 占据总宽度：250px
• 计算方式：在标准盒模型下，width 仅指 content 的宽度。所以总宽度 = content宽度（200px） + padding左右宽度（20px * 2） + border左右宽度（5px * 2） = 200 + 40 + 10 = 250px。

怪异盒模型（border-box）

• 占据总宽度：200px
• 计算方式：在怪异盒模型下，width 包含 content、padding 和 border 的宽度。所以总宽度就是设置的 width 值 200px ，因为 width 已经包含了 content、左右 padding（20px * 2） 和左右 border（5px * 2） 的宽度。