width: 100%仅在父容器有明确宽度、viewport已声明、display类型匹配且上下文未被flex/grid/float破坏时才生效；失效主因包括body未重置、缺少meta viewport、内联元素未转块级、table未设table-layout:fixed等。
width: 100% 不是万能解，它只在父容器有明确宽度且上下文未被破坏时才真正生效。多数“没反应”问题，根源都在父级没撑开、viewport 缺失或 display 类型不匹配。
为什么 width: 100% 经常不生效
百分比宽度是相对于父元素计算的，而 html 和 body 默认不传递视口宽度——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%就是按这个错值算 -
span、a等内联元素默认无视width，得先加display: inline-block或block - 父容器若为
flex或grid，子元素可能被隐式压缩（如flex-shrink: 1），需显式设flex-shrink: 0才保留自适应行为
table 元素怎么真正自适应宽度
直接给 <td> 写 width: 20% 大概率无效——table-layout: auto 下浏览器按内容撑开，fixed 模式下又只读第一行或 <col> 的声明。
- 强制用
table-layout: fixed，且<table>必须有明确宽度（如width: 100%） - 列宽定义优先写在
<col>上：<col width="150"><col width="30%">，别依赖<th>或<td> - 避免混用
min-width/max-width，它们在fixed模式下常被跳过 - 小屏溢出？外层套
<div style="overflow-x: auto">
按钮和内联元素如何实现内容宽度自适应
要让按钮只占文字所需宽度、又能与文字并排，display: inline-flex 是最轻量且兼容性够用的解法。
立即学习“前端免费学习笔记（深入）”；
- 必须配合：
flex-direction: row（虽默认，但 IE11 需显式）、align-items: center（防错位）、清除 UA 样式里的min-width: auto - 不要给按钮本身设
width、min-width或max-width，否则覆盖自适应逻辑 - 文字过长需省略号？三者缺一不可：
white-space: nowrap+overflow: hidden+max-width: 200px；text-overflow: ellipsis单独写无效 - 移动端点击区必须 ≥44×44px，仅靠
padding不稳定，建议用rem或vw控制
更现代的方案：fit-content 和 clamp()
width: fit-content 让元素宽度随内容增长但不溢出父容器，比 width: 100% 更可控；font-size: clamp(1rem, 4vw, 2rem) 则用于弹性缩放文本，避免窄屏挤成一团或大屏过大。
-
fit-content在 Firefox/Chrome/Safari 均已稳定支持，但 IE 完全不支持 -
clamp()三个参数顺序不能错：最小值、首选值（带单位）、最大值 - 二者都依赖父容器未被
overflow: hidden裁剪、未被float或flex隐式约束 - 真正在意响应式效果时，拖动窗口看到文字突然换行的那个像素点，就是你该加
@media的地方
