子元素百分比宽度不随父容器缩放，因百分比基于包含块计算，而父容器若未设显式宽度（如width: auto），子元素50%可能为0或继承视口宽；需用max-width+width:100%设定弹性基准，并设box-sizing:border-box避免溢出。
用 % 设置宽度时，为什么子元素不随父容器缩放？
因为百分比宽度是相对于**包含块（containing block）** 计算的，而很多情况下父容器没有显式设定宽度（比如 div 默认是 width: auto），导致子元素的 50% 实际算出来还是 0 或继承视口宽度，失去流式控制力。
- 必须给父容器设一个可计算的宽度基准：常用
max-width+width: 100%组合 - 避免只写
width: 80%而不约束父级——它可能撑满整个视口，而非你期望的“内容区” - 注意
box-sizing：默认content-box会让padding和border溢出百分比范围，建议统一设为box-sizing: border-box
max-width 和 width: 100% 一起用的真正作用
max-width 不是“最大限制”，而是定义流式容器的**弹性上限**；width: 100% 才让它在小屏下真正收缩。两者缺一不可。
-
max-width: 1200px→ 在桌面端停在 1200px，不继续拉宽 → 在手机上变成 viewport 宽度（比如 375px），子元素按比例缩放才有意义- 漏掉
width: 100%，容器就卡死在max-width值，不会变小 - 只写
width: 100%不加max-width，大屏下内容会无限拉伸，阅读体验崩坏
内边距和外边距用百分比时的坑
padding 和 margin 的百分比值，无论方向，**全按父容器的 width 计算**——这点和 height 无关，容易误判垂直间距。
-
padding-top: 10%和padding-bottom: 10%都基于父容器宽度，不是高度 - 想实现等比垂直留白（比如 16:9 占位），得用
padding-top配合position: relative+absolute子元素 -
margin百分比同理，横向/纵向都吃父宽，别指望它自动适配高度变化
响应式断点前要不要提前写 width: 100%？
要，而且应该作为基础样式写在最前面，而不是只在媒体查询里补。
立即学习“前端免费学习笔记（深入）”；
- 移动端优先原则：默认设
width: 100%+max-width，再用@media往大屏加固定尺寸 - 反着写（比如默认定宽，小屏再改
width: 100%）容易被浏览器渲染顺序干扰，尤其在 Safari 中有延迟生效问题 - 如果用 CSS-in-JS 或框架（如 Tailwind），确认其
max-w-类是否隐含了width: 100%；很多没隐含，得手动叠加w-full
实际项目中最容易被跳过的，是把 box-sizing: border-box 打到根节点或重置样式里——漏了它，所有百分比宽度都会因 padding/border 偏移几像素，调试时很难定位。
