box-sizing

box-sizing: content-box|border-box|inherit;

值为	描述
content-box	在宽度和高度之外绘制元素的内边距和边框
border-box	为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制

*{
     margin:0;
      padding:0;
     box-sizing:border-box;
}
写上 box-sizing: border-box; ，设置padding值 也不用担心没有减小宽度值而变形

---

• 浏览器兼容性

IE8及以上版本支持该属性，Firefox 需要加上浏览器厂商前缀-moz-，对于低版本的IOS和Android浏览器也需要加上-webkit-。实际上，很多reset.css或者normal.css里都包含如下CSS语句，也是比较赞成的用法：

*, *:before, *:after {
　　-moz-box-sizing: border-box;
　　-webkit-box-sizing: border-box;
　　box-sizing: border-box;
　　}

所以也可以这么说

• content-box：标准盒模型，CSS定义的宽高只包含content的宽高
• border-box：IE盒模型，CSS定义的宽高包括了content，padding和border