设置width:100%的input输入框为何会导致外层div出现溢出问题？

问题原因 #

你遇到的溢出是默认CSS盒模型计算规则导致的：

• 浏览器默认的box-sizing属性值为content-box，这种模式下你给元素设置的width:100%仅代表元素内容区的宽度，不包含边框、内边距的宽度。
• 你给input设置了左右各4px的padding、左右各1px的border，两者加起来总共额外占据了10px的宽度，最终input的总实际宽度为100% + 10px，超出了外层100%宽度的容器，就产生了溢出。

解决方案 #

方案1：修改盒模型（最推荐） #

给input添加box-sizing: border-box属性，该属性会让边框、内边距都被计算在你设置的width范围内，不会额外增加元素总宽度：

input, textarea, select {
  box-sizing: border-box;
  /* 其余原有样式保持不变 */
}

如果需要全局统一盒模型规则，可以直接给所有元素设置：

* {
  box-sizing: border-box;
}

这是目前前端开发的通用最佳实践，可以避免绝大多数类似的宽度计算异常。

方案2：手动计算宽度 #

如果不想修改盒模型，也可以用calc()动态计算内容区宽度，减去额外占用的10px即可：

<input type="text" style="width: calc(100% - 10px)"/>

该方案的缺点是后续如果修改padding、border的数值，需要同步调整calc的减数值，维护成本更高。

额外排查项 #

部分浏览器会给form标签设置默认的外边距，如果修改盒模型后仍然有轻微溢出，可以给form添加样式清除默认边距：

form {
  margin: 0;
  padding: 0;
}

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