input设置width:100%页面出现滚动条解决方案

先上解决方案：input 设置 width:100% 和padding后宽度超出父节点,加上下面这行css到超出的元素身上即可

box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;

下面是原理:

box-sizing是什么

一言以蔽之，box-sizing用来控制元素的内容区域的宽/高与padding，border之间的关系；
正常的盒模型：

元素的内容区域宽度=width；
元素的内容区域高度=height；
元素实际占的宽度=width+padding+border；
元素实际占的高度=height+padding+border；

正常显示

从图中可以看出 元素实际占的宽度为 420px（10px+50px+300px+50px+10px）。

box-sizing:content-box

当我们在该div上设置一个 box-sizing:content-box;效果跟默认的一致，也就是说默认的盒子模型就是
box-sizing:content-box; 如下图所示：

box-sizing:border-box

当设置 box-sizing:border-box;时，元素的实际宽度就为 300px了，也就是实际宽度值就是 width的值，而该div的内容区的宽度则为除去 padding 和border后的宽度；如下图所示：