元素换行因inline不支持width，inline-block受空白符影响；应改用flex或清除空白符，且需明确百分比参照对象。
用 width: 50% 做内联响应式，为什么元素换行了？
因为默认的 display: inline 元素不响应 width，而 inline-block 才支持百分比宽度，但会受空白符影响——两个 inline-block 元素之间有换行或空格，浏览器就当它是文本间隙，加起来超过 100% 就必然换行。
- 解决方法：删 HTML 中元素间的换行/空格，或设父容器
font-size: 0，再给子元素单独设字体大小 - 更稳妥的做法是改用
display: flex，它天然忽略空白符，且支持flex-wrap控制是否换行 - 别在
style标签里写display: inline; width: 50%，这根本无效
在 <style> 标签里写百分比，哪些值能响应视口变化？
width、max-width、padding、margin 这些基于父容器尺寸的属性，只要父容器宽度随视口变化（比如没设固定宽的 <div>），它们就会响应；但 font-size 不会——除非你用 vw 单位，比如 font-size: 2.5vw。
-
height: 50%大概率失效，因为块级元素高度默认由内容撑开，不是由父容器决定，除非父容器有明确height -
padding-bottom: 50%是有效的，它按父容器宽度计算（这是 CSS 规范定义的），常用于响应式正方形容器 - 避免对
<input>或<button>直接设width: 100%，它们默认box-sizing: border-box，但有些老版本 Safari 会算错边框
移动端小屏下，width: 100% 的按钮还是溢出屏幕？
常见原因是没重置默认的 margin 和 padding，尤其是 iOS Safari 对表单控件有额外内边距，或者父容器用了 zoom 或 transform 导致计算偏差。
- 强制重置：给按钮加
margin: 0; padding: 0; box-sizing: border-box; - 确保父容器没有
overflow: hidden以外的缩放类名（比如某些 UI 库的scale-95） - 检查是否意外设置了
min-width，它会覆盖width: 100% - 用
calc(100% - 2px)代替纯100%可绕过某些渲染误差，但只是权宜之计
只靠 <style> 标签 + 百分比，能替代媒体查询吗？
不能。百分比布局解决的是「相对缩放」，媒体查询解决的是「断点切换」——比如小屏堆叠、中屏并排、大屏三栏，这种结构级变化必须靠 @media 切换 display 或 flex-direction。
立即学习“前端免费学习笔记（深入）”；
-
width: 33.333%在所有屏幕都三列，但小屏显然该变一列 - 想兼容旧版 IE8？那只能用
float+ 百分比，但必须手动清浮动，且无法响应式折行 - 现代项目里，
style标签里写死百分比不如用 CSS 自定义属性 + JS 动态更新，比如--col-width: 100%，再用 JS 根据matchMedia改值
真正麻烦的不是怎么写百分比，而是搞清“谁的百分比”——父容器是否收缩、是否被 position: absolute 脱离文档流、有没有 transform 干扰尺寸计算。这些细节不验证，光调数字没用。
