当为 `` 设置 `width: 100%` 时，它仍可能溢出父 `
在标准 CSS 盒模型中，元素的最终占用宽度 = width + padding-left + padding-right + border-left-width + border-right-width。由于 元素在大多数浏览器中默认带有内边距（如 padding: 2px 5px）和边框（如 border: 1px solid #aaa），即使你设置了 width: 100%，其实际渲染宽度也会超过父容器的可用宽度，导致水平溢出或布局错位。
以下是一个典型复现示例：
div {
border: 2px solid orange;
width: 300px; /* 显式限定便于观察 */
}
label {
background-color: blue;
display: block;
}
input {
width: 100%; /* ❌ 仍会溢出 */
}? 根本原因：width: 100% 仅控制 content box 的宽度，而默认 box-sizing: content-box 下，padding 和 border 会额外叠加。
✅ 推荐解决方案：使用 box-sizing: border-box
这是现代 Web 开发的标准实践，能确保 width: 100% 真正代表元素整体占据的水平空间（含 padding 和 border）：
input {
width: 100%;
box-sizing: border-box; /* ✅ 推荐 —— 简洁、可维护、符合直觉 */
}? 提示：你还可以将该规则全局应用，避免重复声明：
*, *::before, *::after {
box-sizing: border-box;
}⚠️ 替代方案（不推荐优先使用）：手动清除默认样式
input {
width: 100%;
padding: 0;
border: none;
margin: 0; /* 可选：防止某些 UA 样式干扰 */
}虽然可行，但该方式牺牲了 UI 一致性（如失去原生输入框的视觉反馈），且需额外处理不同浏览器的 UA 样式差异，可维护性较低。
? 总结建议：
- 始终为表单控件启用 box-sizing: border-box；
- 在项目初始化 CSS 中统一设置 *, *::before, *::after { box-sizing: border-box; }；
- 避免仅依赖 width: 100% 而忽略盒模型行为——理解 content-box 与 border-box 的差异是响应式布局的基础能力。
