box-sizing有两种取值
1、content - box:当我们设置 box-sizing: content-box;
时,浏览器对盒模型的解释遵从我们之前认识到的 W3C 标准,当它定义width和height时,它的宽度不包括border和padding。
2、border - box:当我们设置box-sizing: border-box;
时,浏览器对盒模型的解释与 IE6之前的版本相同,当它定义width
和height
时,border
和padding
则是被包含在宽高之内的。内容的宽和高可以通过定义的“width”和 “height”减去相应方向的“padding”和“border”的宽度得到。内容的宽和高必须保证不能为负,必要时将自动增大该元素border box的尺寸以使其内容的宽或高最小为0。