为什么要设置box-sizing: border-box?

`box-sizing: border-box;` 是 CSS 中的一个属性，用于定义元素的盒模型。默认情况下，元素的盒模型遵循标准盒模型，也就是内容区域（content）、内边距（padding）和外边距（margin）各自独立计算空间。

当你将 `box-sizing` 设置为 `border-box` 时，会发生以下变化：
1. **整体尺寸包括边框**: 元素的总宽度和总高度会根据内容、内边距和边框来计算，而不是仅限于内容区域。这意味着你设置的宽度和高度会直接包含边框，避免了边框意外增加元素的实际尺寸，使得布局更加直观和易于控制。
2. **更易维护**: 使用 `border-box` 可以帮助开发者更好地预测元素的实际大小，特别是当你调整内边距或边框样式时，不会意外地影响到其他样式。
3. **一致性**: 许多现代浏览器和其他设计工具（如 Bootstrap）已经默认采用 `border-box`，这有助于保持跨平台的一致性。

相关问题：
1. 为什么标准盒模型可能导致布局问题？
2. 在响应式设计中，`border-box` 有何优势？
3. 如何在 CSS 中设置一个元素使用 `border-box` 盒模型？