必须加 box-sizing: border-box 才能真正“贴边”，因为表单元素默认 box-sizing: content-box，width: 100% 不含 padding 和 border，导致总宽度溢出；加 border-box 后 width 包含 padding 和 border，整体严格等于父容器宽。
为什么 width: 100% 在表单元素上经常“撑出容器”
直接写 width: 100% 后， 或 经常会溢出父容器——这不是 bug，是 CSS 默认盒模型的正常表现。浏览器默认对表单控件使用 box-sizing: content-box，此时 width: 100% 只管内容区宽度，而 padding 和 border 会额外加在它外面，总宽度 = 100% + padding × 2 + border × 2。
必须加 box-sizing: border-box 才能真正“贴边”
加上这句后，width: 100% 就包含 padding 和 border 了，整体宽度才严格等于父容器宽度。但注意：不是所有表单元素都默认支持该声明，尤其老版本 IE 对 、 的 box-sizing 行为不一致。
-
input[type="text"]、input[type="email"]等基本输入框加box-sizing: border-box安全可靠 -
在 Chrome/Firefox 中表现良好；IE9+ 也支持，但 IE8 及更早版本会忽略 -
在部分 Safari 和旧 Android WebView 中可能仍存在渲染偏差，建议额外设min-width: 0防止最小宽度干扰
完整可用的自适应表单样式片段
以下代码覆盖常见表单控件，兼顾兼容性与语义清晰：
form input,
form select,
form textarea {
width: 100%;
box-sizing: border-box;
padding: 8px 12px;
border: 1px solid #ccc;
font-size: 14px;
}
/* 防止 select 在某些环境下撑宽 */
form select {
min-width: 0;
}
/* 可选：重置 outline，避免聚焦时偏移 */
form input:focus,
form select:focus,
form textarea:focus {
outline: none;
border-color: #007bff;
}遇到响应式布局时还要注意什么
当父容器本身宽度会变（比如 flex 项或媒体查询切换），仅靠 width: 100% 不够稳定：
立即学习“前端免费学习笔记（深入）”；
- 如果父容器是
flex子项，需确保其未被min-width: auto锁死（Chrome 默认行为），可显式加min-width: 0 - 在
grid布局中，input若位于fr单元格内，width: 100%有效；但若单元格设了minmax(0, 1fr)更稳妥 - 移动端键盘弹出时，iOS Safari 可能临时缩放表单控件，导致
width: 100%计算失准，此时可加viewportmeta 的user-scalable=no（慎用）或监听resize事件微调
真正麻烦的从来不是写一行 box-sizing: border-box，而是你忘了它只作用于当前元素——嵌套表单、第三方 UI 库组件、或者用了 all: unset 之后，它就悄悄失效了。
