其实在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属性的值