概述
box-sizing定义了一个盒子计算宽高的标准,页面中一个盒子的宽度 = border + padding + contentWidth,box-sizing可以改变他的计算方式
box-sizing: content-box;
box-sizing的默认值就是content-box,表示内容盒。他的宽高计算如下
width = 左边的boder + 左边的padding + 内容区content + 右边的padding + 右边的border 所以这里得出宽度是130px
box-sizing: border-box;
可以把box-sizing的属性改为border-box,表示边框盒子。我们的宽高设置多少,这个盒子的宽高就是多少。宽高计算如下
设置了box-sizing: border-box;之后,宽高就把边框和内边距包含在内了。宽高设置了多少,这个盒子的宽高就等于多少