box-sizing 是用于告诉浏览器如何计算一个元素是总宽度和总高度 盒子的四个组成区域相对应,每个盒子有四个边界:内容 Content 、内边距 Padding、边框 Border、外边框 Margin 。
标准盒模型 box-sizing: content-box content-box: width = content width; height = content height IE盒模型 box-sizing: border-box border-box: width = border + padding + content width heigth = border + padding + content heigth
注意点:经常有人问为什么加了padding之后div的宽度变了,那是默认是标准盒模型。只是看起来变了,实际宽度还是那么多。 如果想不变可以更改IE盒模型 box-sizing: border-box