width: 100% 不生效主因是父容器未设置宽度或存在默认边距，需重置 html/body 边距、设置 width、添加 viewport 元标签，并配合 box-sizing: border-box；浮动或 table 布局下应改用 flex 或 fixed 表格布局。
width: 100% 为什么经常不生效
直接写 input { width: 100% } 却没撑满父容器？大概率是父元素没“立住”——width: 100% 永远相对于**包含块的 content box 宽度**计算，而默认的 body 有 margin、没设 width，导致子元素的 100% 实际算出来可能只有几百像素。
必须做两件事：
html, body { margin: 0; padding: 0; width: 100%; }- 页面
中加<meta name="viewport" content="width=device-width, initial-scale=1.0">，否则 iOS Safari 默认按 980px 渲染，100%就按这个错值算
box-sizing: border-box 是刚需，不是可选项
文本框加了 padding 或 border 后，width: 100% 会溢出父容器——因为默认 box-sizing: content-box 把 padding 和 border 算在宽度之外。结果就是：你设了 width: 100%，实际宽度 = 100% + padding + border。
正确写法必须带上：
input { width: 100%; padding: 8px; border: 1px solid #ccc; box-sizing: border-box; }- 全局重置更省事：
* { box-sizing: border-box; }（注意性能影响，生产环境慎用）
浮动布局下 input 宽度被挤压缩水
当 input 和 label、button 在同一行且用了 float，width: 100% 会失效——因为浮动元素脱离文档流，input 的“包含块”不再是父容器，而是浮动后剩余的空间。
解决思路不是硬调 width，而是换布局模型：
- 去掉
float，改用display: flex父容器：#qsrxSearchbar { display: flex; align-items: center; } -
input设为flex: 1，自动填满剩余空间，比width: 100%更可靠 - 若必须兼容老浏览器，可用
overflow: hidden触发 BFC，让input块级化并避开浮动干扰
table 布局里 input 自适应特别容易翻车
在 <table> 里给 <code><td> 内的 <code>input 写 width: 100%，常被忽略两个关键点：
<table> 必须先有明确宽度，比如 <code>width: 100%或固定值；否则<td> 宽度由内容撑开，<code>input的 100% 就失去参照- 推荐加
table-layout: fixed，再配合<col>定义列宽，避免浏览器按内容反复重排导致 input 跳动 - 别在
<td> 上写 <code>width，它在table-layout: auto下基本无效真正稳定的做法是：把 table 当展示结构用，表单控件尽量抽离到 flex/grid 容器里——input 的自适应本就不该依赖 table 布局来兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
