设置width:100%的input元素超出无padding/border父容器宽度问题求解

你遇到的input宽度溢出问题和父元素是否设置padding、border无关，核心原因有两个：

• 你没有给input元素设置box-sizing: border-box。浏览器对原生表单元素的默认盒模型是content-box，这种模式下你设置的width: 100%仅代表内容区域的宽度，input自身默认带的2px左右边框、1~2px的左右内边距会额外叠加到总宽度上，最终总宽度就会超过父容器的宽度。
• 你没有做浏览器默认样式重置，不同浏览器会给form、div、input等元素默认添加不同的内外边距，即使你自己没写相关样式，这些默认值也会干扰布局计算。

最简单的修复方式是在CSS文件最顶部添加全局重置规则：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

这个规则会把所有元素的盒模型统一为border-box，同时清除所有浏览器默认的内外边距，从根源避免这类布局错乱问题。
如果你不想全局修改样式规则，也可以单独给用到的input添加盒模型设置即可：

input[type="text"],
input[type="email"] {
  box-sizing: border-box;
}

你HTML代码中name对应的input标签有个残缺的size=属性，没有赋值属于无效代码，直接删掉即可，不会影响现有布局。

内容的提问来源于stack exchange，提问作者Luis Dorado