面试题：CSS中width和height在不同盒模型下的设置规则差异

Question

请阐述在标准盒模型（content-box）和怪异盒模型（border-box）下，width和height属性的设置规则有何不同，并举例说明如何通过CSS代码来切换这两种盒模型。

Answer 1

标准盒模型（content-box）

1. width 和 height 设置规则：在标准盒模型中，width 和 height 仅指定内容区域（content）的宽度和高度。也就是说，元素的实际宽度和高度计算方式为 width + padding + border + margin。例如，当设置 width: 100px; padding: 10px; border: 1px solid black; margin: 5px; 时，元素在页面上占据的水平空间为 100px（width） + 2 * 10px（padding） + 2 * 1px（border） + 2 * 5px（margin） = 132px。

怪异盒模型（border-box）

1. width 和 height 设置规则：在怪异盒模型（border-box）下，width 和 height 包括了内容区域（content）、内边距（padding）和边框（border）的宽度和高度。即元素的实际宽度和高度就是设置的 width 和 height 值，不会再额外加上 padding 和 border 的宽度。例如，同样设置 width: 100px; padding: 10px; border: 1px solid black; margin: 5px; 时，元素在页面上占据的水平空间为 100px（width 已包含 padding 和 border） + 2 * 5px（margin） = 110px。

通过 CSS 代码切换两种盒模型

1. 标准盒模型：浏览器默认使用标准盒模型，无需额外设置。例如：

div {
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 1px solid black;
    margin: 5px;
}

2. 怪异盒模型：通过设置 box-sizing: border-box; 来切换为怪异盒模型。例如：

div {
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 1px solid black;
    margin: 5px;
}

也可以通过对 * 选择器设置 box-sizing 来全局应用怪异盒模型：

* {
    box-sizing: border-box;
}

这样页面上所有元素（除了明确设置了其他 box-sizing 值的元素）都将使用怪异盒模型。