当为 input 设置 `width: 100%` 时，若未调整盒模型，默认 `box-sizing: content-box` 会导致实际宽度 = 内容宽 + padding + border，从而溢出父元素。解决方案是重置边框/内边距，或改用 `box-sizing: border-box`。
在标准 CSS 盒模型中，元素的默认 box-sizing 值为 content-box。这意味着当你声明 width: 100% 时，该宽度仅指内容区域（content）的宽度，而浏览器会额外将 padding 和 border 添加到这个宽度之外——最终总占用空间 = 100% + padding-left + padding-right + border-left-width + border-right-width。这正是你观察到 input 溢出 label 容器的根本原因。
以下是一个可复现问题的最小示例：
<div>
<label id="name-label">
NOMBRE
<input type="text" id="username" name="username" placeholder="Introduce tu nombre" required>
</label>
</div>div {
border: 2px solid orange;
width: 300px; /* 显式设宽便于观察 */
}
label {
background-color: blue;
display: block;
}
input {
width: 100%; /* 问题根源：100% 仅覆盖 content 区域 */
}此时，即使 label 宽度为 300px，input 的实际渲染宽度可能达到 300px + 2×8px（默认 padding） + 2×2px（默认 border） ≈ 320px，明显溢出。
✅ 推荐解决方案：使用 box-sizing: border-box
这是现代 Web 开发的标准实践，能确保 width: 100% 真正代表元素整体占据的水平空间（含 padding 和 border）：
input {
width: 100%;
box-sizing: border-box; /* ✅ 关键修复 */
}? 进阶建议：全局重置盒模型（强烈推荐）
为避免在每个表单控件中重复设置，可在项目起始 CSS 中统一应用：
*,
*::before,
*::after {
box-sizing: border-box;
}这样所有元素（包括 <input>、<textarea>、<button> 等）都将遵循更直观的尺寸逻辑。
⚠️ 注意事项：
- 不要仅依赖 padding: 0; border: none; 作为通用解法——它虽能临时规避问题，但牺牲了 UI 一致性与可访问性（如无边框可能影响焦点状态识别）；
- border-box 不影响 margin，外边距仍位于盒模型外部，不受 width 限制；
- 所有现代浏览器均原生支持 box-sizing，无需前缀。
总结：理解并主动控制 box-sizing 是精准控制布局宽度的基础能力。将 box-sizing: border-box 设为默认，能让 width: 100% 的行为真正符合直觉，大幅提升响应式表单开发效率与可靠性。
