（踩的坑）CSS盒子模型 - 元素的总宽度、高度包括padding、border、margin。最终用box-sizing:border-box解决

其实在CSS中，最终 元素的总宽度计算公式是这样的：

总元素的宽度=width+左&右填充padding+左&右边框border+左&右边距margin

 

最终 元素的总高度最终计算公式类似上述：

总元素的高度=height+顶部&底部填充+上&下边框+上&下边距

 

---

解决方法：

可以使用 box-sizing：border-box改变这种情况。

 

语法：box-sizing: content-box | border-box | inherit;

 

box-sizing:border-box

设置box-sizing:border-box后，就会将padding、border、margin的值算入width和 height里面去了，使得 总元素的宽度 = width的值 、总元素的高度 = height。

 

box-sizing: content-box

其实就是默认的，将padding、border、margin的值不 算入width和 height里面去。

 

box-sizing: inherit

继承父元素 box-sizing属性的值