当为 `` 设置 `width: 100%` 时，它仍可能溢出父元素——这是因为默认的 `box-sizing: content-box` 将 padding 和 border 计入额外空间，而非包含在 100% 宽度内。
在 CSS 中，width: 100% 确实是相对于父元素（此处为
✅ 推荐解决方案：使用 box-sizing: border-box
这是现代 Web 开发的标准实践，能确保 width 值包含 content、padding 和 border：
input {
width: 100%;
box-sizing: border-box; /* 关键：让 padding/border 包含在 width 内 */
}? 提示：建议全局重置表单控件盒模型，提升一致性：input, select, textarea, button { box-sizing: border-box; }
⚠️ 替代方案（不推荐单独使用）
手动清除默认样式虽可行，但易遗漏且维护性差：
input {
width: 100%;
padding: 0;
border: none;
margin: 0; /* 部分浏览器可能有默认 margin */
}该方式虽能“修复”溢出，却牺牲了 UI 可用性（如无内边距导致文字紧贴边框），且未解决根本问题——盒模型理解偏差。
? 验证效果
结合原始 HTML：
<div>
<label id="name-label">
NOMBRE
<input type="text" id="username" name="username" placeholder="Introduce tu nombre" required>
</label>
</div>加上修正后的 CSS：
div {
border: 2px solid orange;
width: 300px; /* 显式设宽便于观察 */
}
label {
background-color: blue;
display: block;
}
input {
width: 100%;
box-sizing: border-box;
padding: 8px; /* 现在可安全添加内边距 */
border: 1px solid #ccc;
}此时 将严格贴合
总结：width: 100% 溢出的本质是盒模型误解；box-sizing: border-box 是语义清晰、兼容良好、易于维护的终极解法——请将其作为表单样式的默认配置。
