box-sizing 属性 

1.content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。 

2.border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width，height内的。也就是说，如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。

全局设置border-box的好处

全局设置 border-box 很好，更符合我们通常对一个「盒子」尺寸的认知。，其次它可以省去一次又一次的加加减减，它还有一个关键作用：让有边框的盒子正常使用百分比宽度。但是使用了 border-box 可能会与一些依赖默认 box-sizing 的库冲突，不过这种问题大多数时候可以通过把交由这些库处理的块的 box-sizing 设置回 content-box 来解决。  

全局设置border-box代码实现

html {
  box-sizing: border-box;
}
*,*::before,*::after {
  box-sizing: inherit;
}

说明：

选择器 * 无法覆盖到伪元素，所以需要给 :before 和 :after 分别设置。 
box-sizing: border-box 添加padding 或者border 不影响元素的width 或者height 。
box-sizing: inherit 使元素尊重其父元素box-sizing 规则。

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/1234