其实在CSS中，最终 元素的总宽度计算公式是这样的：
总元素的宽度=width+左&右填充padding+左&右边框border+左&右边距margin
最终 元素的总高度最终计算公式类似上述：
总元素的高度=height+顶部&底部填充+上&下边框+上&下边距
解决方法：
可以使用 box-sizing：border-box改变这种情况。
语法：box-sizing: content-box | border-box | inherit;
扫描二维码关注公众号，回复：
9284793 查看本文章
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属性的值
