Emotion为何全局设置box-sizing: border-box？

• 布局计算更直观：浏览器默认的content-box中，元素的实际宽度是「内容宽度 + 内边距 + 边框」，添加内边距或边框会直接增大元素整体尺寸，很容易打乱预设布局。而border-box会将内边距、边框都纳入你设置的宽高值范围内，元素的实际尺寸就是你定义的宽高，不用额外调整数值来抵消内边距和边框的影响，布局逻辑更清晰。
• 适配响应式场景更省心：在响应式布局里常用百分比宽度，border-box能确保元素的内边距和边框不会让元素超出父容器范围，避免出现横向滚动条或布局错位，让响应式开发更顺畅。
• 统一组件表现：像Mantine这类UI组件库需要保证所有组件的表现一致，全局设置border-box可以让所有组件的尺寸计算逻辑统一，开发者不用在每个组件里单独处理盒模型，减少样式冲突和意外布局问题。
• 符合行业通用习惯：目前border-box已经是前端开发的主流选择，多数知名框架都默认采用这种设置，符合开发者的普遍预期，降低学习和使用成本。

内容的提问来源于stack exchange，提问作者Motonari