在大多数情况下我们在设置元素的 border 和 padding 并不希望改变元素的 width,height值,这个时候我们就可以为该元素设置 box-sizing:border-box;
。
如果不希望每次都重写一遍,而是希望他是继承而来的,那么我们可以使用如下代码:
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
这样的好处在于他不会覆盖其他组件的 box-sizing 值,又无需为每一个元素重复设置 box-sizing:border-box;