`* { box-sizing: border-box; }` 是什么作用？
它有什么优点？主题
CSS
在GitHub上编辑
* { box-sizing: border-box; } 使页面上的每个元素都使用 box-sizing: border-box 方法来计算元素的 height 和 width。
有什么区别？
默认情况下，元素应用了 box-sizing: content-box，如果一个元素指定了 height 和 width，则只计算内容大小。box-sizing: border-box 改变了元素的 width 和 height 的计算方式，border 和 padding 也被包含在计算中。现在，一个元素的高度由内容的 height + 垂直 padding + 垂直 border 宽度计算。一个元素的宽度现在由内容的 width + 水平 padding + 水平 border 宽度计算。
下表指示了当属性具有各自的 box-sizing 时，该属性是否包含在元素的 height 和 width 的计算中：
| 属性 | box-sizing: content-box (默认) | box-sizing: border-box |
|---|---|---|
| content | 是 | 是 |
padding | 否 | 是 |
border | 否 | 是 |
margin | 否 | 否 |
优点
将 padding 和 border 考虑为盒子模型的一部分，这与设计师在网格中实际想象内容的方式更吻合。这是一种更直观的思考盒子的方式，因此许多 CSS 框架全局设置 * { box-sizing: border-box; }，以便所有元素默认使用这种盒子模型。