水滴前端面经及参考答案

盒模型是什么，标准盒模型和 IE 盒模型有什么区别？

盒模型是 CSS 中一个基础概念，它描述了元素在页面中所占的空间大小。每个元素都可以看作是一个矩形盒子，从内到外由内容区（content）、内边距（padding）、边框（border）和外边距（margin）组成。

标准盒模型的宽度和高度只包含内容区（content），不包含内边距、边框和外边距。例如，设置一个元素的宽度为 200px，那么这个 200px 只表示内容区的宽度，元素实际占用的宽度还需要加上左右内边距、左右边框以及左右外边距。

IE 盒模型（也称为怪异盒模型）的宽度和高度包含内容区、内边距和边框，但不包含外边距。同样设置一个元素的宽度为 200px，在 IE 盒模型中，这 200px 包含了内容区、左右内边距和左右边框的总宽度。如果内边距或边框增加，内容区的宽度会相应减少，以保持元素总宽度不变。

两种盒模型的主要区别在于宽度和高度的计算方式。标准盒模型的宽度和高度只针对内容区，而 IE 盒模型的宽度和高度包含了内容区、内边距和边框。这种差异在进行页面布局时可能会导致意外的结果，因此需要根据具体需求选择合适的盒模型。

可以通过 CSS 的 box-sizing 属性来切换盒模型