使用box-sizing让拥有padding属性的元素不超出想要的宽度

这两天做页面的设计，想实现一个input最宽的一个搜索框，所以用了

input{display:block; width:100%;}

由于默认的样子 有点不好看，遂加入：

border:1px solid #FF8B02;
border-radius: 5px;
padding:10px;

可是问题来了，由于加入了padding属性，导致页面变形了。原因无它，就是因为width:100%后，浏览器又再外面加了20px;所以宽度超出了自己的预想。

例如：

input{display:bolck;width:500px;border:1px solid black;}

实际宽度为502px;

当加入

padding:10px;

实际的宽度就变成了522px;了，这和我想要的不一样。

看到bootstrap中实现了我想要的效果：无论padding是多少，元素的宽高都不变；

比如我想要1000px;的像素，加了padding 和border之后，实际的宽度还是1000px;

这样border与padding都在内部了。

进过调试研究发现一个属性叫做box-sizing。使用了这个属性之后就能让它的宽度 不再超出想要的范围了，实现了我想要的效果

具体使用方法及介绍可查看教程教程：box-sizing。