一.box-sizing：border-box

1.基本认知

以下dom元素的宽度高度都为100px。

现在有个需求，就是元素宽度高度为100px，padding值为10px，那么就出现了下面这个样子。

可以看到two元素比one元素大了一圈，因为在two元素身上添加了padding：10px的属性，那么导致了two元素的宽度高度就发生了变化。

那么添加box-sizing：border属性之后。看下面。

这么一来，three的宽度高度即是100px且它的padding也是10px。即符合需求了。

2.未设置与设置box-sizing：border-box的结构前后对比

未设置box-sizing：border-box属性前dom元素的基本布局。

即内容区域width/heigth = 指定的width/height（比如上文指定的100px）

设置box-sizing：border-box属性后的dom元素的基本布局。

即内容区宽度+padding+border = 总宽度width（比如上文指定的100px）。实际上会根据padding属性和border属性去平分分配内容区的宽度。

还是以前面的属性为例。如果还没有很好的理解，看下图就会更好的理解。

3.模型结构

1.two元素的模型结构（未设置box-sizing：border-box）

结合上文2下的未设置box-sizing：border-box介绍的公式

2.three元素的模型结构（设置box-sizing：border-box）

结合上文2下的设置box-sizing：border-box介绍的公式

本文的介绍大多数都是以图的形式去理解的，只穿插了一些文字描述，并未按照那种常规形式来描述。这里也只介绍到了盒模型的box-sizing：border-box，如果想了解盒模型的完整知识体系，推荐查看MDN的盒模型developer.mozilla.org/en-US/docs/…