我们可以把HTML元素看作是一个盒子。CSS的盒子模型由外向内包含：margin（外边距）、border（边框）、padding（内边距）、content（内容）。在标准盒子模型中，width（宽度）= content（内容），但在低版本IE（IE7以下）有不一样的盒子模型，width（宽度）= border（边框）+ padding（内边距）+ content（内容），也被称为怪异盒子模型。
盒子模型示意图
可以通过 box-sizing 属性设置盒子模型的模式，默认值为 content-box，即元素的 width（宽度）= content（内容）。将值设置为 border-box，则元素的 width（宽度）= border（边框）+ padding（内边距）+ content（内容）。