`* { box-sizing: border-box; }` 是干什么的？
它有什么好处？Topics
CSS
在GitHub上编辑
* { box-sizing: border-box; }使页面上的每个元素都使用 box-sizing: border-box 方法来计算元素height 和 width。
有什么区别？
默认情况下，元素应用了 box-sizing: content-box，如果一个元素指定了 height 和 width，那么只有内容尺寸被考虑在内。 box-sizing: border-box 会改变计算元素的 width 和 higit的计算方式，border 和 padding 也会被包括在计算中。 一个元素的height现在是按照内容的height+垂直padding+垂直border宽度计算的。 元素的 width 现在是按照内容的 width + 水平padding + 水平border 来计算的。
下表显示当属性具有相应的 box-sizing时，是否计算包含在元素的高度和宽度：
| 属性 | box-sizing: content-box (默认) | box-sizing: border-box |
|---|---|---|
| 内容 | 是 | 是 |
padding | 否 | 是 |
border | 否 | 是 |
margin | 否 | 否 |
优点
将 padding 和 border 作为盒子模型的一部分来考虑，更符合设计师对网格中内容的实际想象。 这是一种更直观的思考盒子的方式，因此许多 CSS 框架（例如 Bootstrap、Tailwind、Bulma）在全局范围内设置* { box-sizing: border-box; }，以便所有元素默认使用这种盒子模型。