Box-sizing reset

### Box-sizing reset

重置盒模型使得元素的宽度`width`和过高度`height`不会受它们的边框`border`和内边距`padding`影响

 

#### HTML

<div class="box">border-box</div>
<div class="box content-box">content-box</div>

#### CSS

html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
.box {
  display: inline-block;
  width: 150px;
  height: 150px;
  padding: 10px;
  background: tomato;
  color: white;
  border: 10px solid red;
}
.content-box {
  box-sizing: content-box;
}

#### Demo

https://codepen.io/hahazexia/pen/WYKQNV

#### Explanation

1. `box-sizing: border-box`使得内边距`padding`和边框`border`的附加值不会影响元素的宽度`width`和高度`height`

2. `box-sizing: inherit`使得一个元素会遵循它的父级元素的`box-sizing`规则

在项目中的样式表中加入这段css使所有元素的盒模型默认都是border-box，当需要原始盒模型的时候加上content-box即可

来源：https://www.cnblogs.com/hahazexia/p/10023868.html