CSS - 盒子模型

今天我们来说一下盒模型

当你设置了元素的宽度，但是实际展示的宽度却超过了你设置的宽度。两个盒子都设置了2个像素的边框，所以实际上两个盒子在网页上展示的宽度要比设置的宽度大（图中第一个盒子的宽度为504px）。下面的第二个盒子，由于设置了上右下左的内边距为20px，所以第二个盒子的宽度为544px（宽度为500px，左右内边距加起来40px，左右分别2px的边框）。

如果想让设置的宽度一样的话，那就需要开发者在宽度的基础上减去内边距和边框的宽度，上图的话可以这样设置：第一个盒子宽度设置为496px，第二个盒子的宽度设置为456px，这样设置的话宽度就是一样的了，不过这样设置的话很麻烦不便于维护。

这里我们可以这样做：

CSS新增了一个box-sizing属性，当你设置一个元素的属性为 box-sizing:border-box 时，这个时候元素的内边距和边框就不会再增加元素的宽度了。如下图：

由于是新的属性，我测试的浏览器是谷歌浏览器最新版，开发者要是遇到不兼容可以加前缀

同时这个属性支持IE浏览器：IE8+以上版本