属性介绍
CSS3 中可以通过 box-sizing 来指定盒模型，有2个值：即可指定为 content-box、border-box，这样我们计算盒子大小的方式就发生了改变
可以分成两种情况：
-
box-sizing: content-box 盒子大小为 width + padding + border （以前默认的）
-
box-sizing: border-box 盒子大小为 width
如果盒子模型我们改为了box-sizing: border-box ， 那padding和border就不会撑大盒子了（前提padding和border不会超过width宽度）
举个例子
<head>
<style>
input,button {
/* content-box 全部用css2盒子模型计算 */
/* border-box 全部用css3盒子模型计算 */
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<!-- input 它是css2盒子模型 边框 内边距会撑大盒子 默认content-box-->
<input type="text">
<!-- button 它是css3盒子模型 边框和内边距不会撑大盒子 默认border-box-->
<button>按钮</button>
</body>
</html>解决方法：
