如何从 HTML 元素继承 box-sizing ？

在大多数情况下我们在设置元素的 border 和 padding 并不希望改变元素的 width、height 值，这个时候我们就可以为该元素设置 box-sizing:border-box;

如果不希望每次都重写一遍，而是希望它是继承过来的。

1. 在 HTML 上设置 box-sizing = "border-box"；
2. 对于所有子元素，设置 box-sizing = "inherit"，以继承父元素的 box-sizing 样式；

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

通过这种方式，可以确保 HTML 元素及其所有子元素的 box-sizing 属性都被设置为 border-box，也不会覆盖其他组件的 box-sizing 值，又无需为每一个元素重复设置 box-sizing:border-box;，从而优化盒模型的布局计算。