button width: 100% 失效主因是父容器未撑开：body 默认 margin 且无 width，计算基准为 undefined；移动端缺 viewport 声明时 ios safari 按 980px 渲染，导致 100% 计算错误；需同步重置 html/body 宽度、加 viewport、确保父容器非 inline 或未设宽的 flex item。
button width: 100% 为什么经常没反应
直接写 width: 100% 失效，不是 button 本身的问题，而是父容器没撑开——body 默认有 margin，且未设 width，导致 100% 计算基准是“undefined”。移动端还常缺 <meta name="viewport" content="width=device-width">，iOS Safari 按 980px 渲染，100% 就按这个错值算。
必须同步做三件事：
- 重置
html, body { margin: 0; padding: 0; width: 100%; } - 加 viewport 声明（尤其移动端）
- 确认父容器不是
display: inline或未设宽度的 flex item（比如flex-shrink: 0会阻止压缩）
想让按钮只占内容宽度，别撑满整行
display: inline-flex 是最轻量解法，它让 button 表现为“可伸缩的内联盒子”，不破坏行流布局，IE11+ 全支持。
光写 inline-flex 不够，还得配这几条：
- 去掉 UA 默认的
min-width: auto（某些浏览器给 button 加了最小宽度） - 显式写
flex-direction: row和align-items: center，避免垂直错位 - 别设
width、min-width、max-width，否则覆盖自适应逻辑 - 如果文字可能很长，加
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px（三者缺一不可）
按钮文字要换行，又不想固定像素宽
用 display: block + white-space: normal 最直接。button 默认是 white-space: nowrap，所以即使设了 width: 200px，文字也硬挤在一行。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
关键组合：
-
display: block（或inline-block，但 block 更稳妥） -
width: 100%或max-width: 300px（给上限） -
white-space: normal（允许断行） -
word-break: break-word（防长 URL/UUID 撑破） -
text-align: center（多行时居中）
width: fit-content 和 width: auto 的区别在哪
width: auto 是块级默认行为，但 button 是替换元素，部分浏览器 UA 样式会干扰它；width: fit-content 才真正按内容收缩，且兼容性已足够好（Chrome 69+/Firefox 65+/Safari 15.4+）。
更安全的写法是：width: fit-content; max-width: 100% —— 这样既随文字增长，又不会超出父容器。注意：fit-content 在 flex 容器里需配合 flex-shrink: 1，否则可能被强行拉伸。
容易被忽略的是：如果父容器用了 display: grid 或 table，fit-content 的计算逻辑会变，得单独验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
