box-sizing: border-box是唯一可靠解法，它使width包含padding和border，避免子元素因padding撑破父容器；需全局通配、::before、*::after，否则子元素仍按content-box计算。
子元素 width: 100% + padding 导致父容器横向溢出
直接原因是 box-sizing 默认为 content-box，此时 width: 100% 只管内容区，padding 和 border 会额外加在外部。父容器若本身有 padding 或 border，子元素一设 width: 100% 就必然超宽。
解决不是靠调小百分比或删 padding，而是统一用 border-box：
- 全局加
* { box-sizing: border-box; }，一劳永逸 - 若不能改全局，至少给父容器和关键子元素显式设
box-sizing: border-box - 避免在浮动/绝对定位父容器上直接加
padding，改用margin或嵌套一层内层容器
Flex 子项被压缩变形，撑不开也不缩放
这不是尺寸没写对，是 flex-shrink: 1 在默认生效——哪怕你写了 width: 200px，只要总宽度超限，浏览器就会无视它强行缩小。
对尺寸敏感的元素（如 <img>、按钮、图标、短标签），必须关掉收缩逻辑：
- 写
flex-shrink: 0，但注意会被flex: 1这类简写覆盖 - 更稳妥的是用完整简写：
flex: 0 0 200px（flex-grow、flex-shrink、flex-basis全锁死） -
<img>还要配合min-width: 0，否则flex-shrink: 0仍可能无效（因替换元素默认min-width: auto）
绝对定位子元素让父容器高度塌陷
父容器高度为 0 不是 bug，是规范行为：绝对定位元素完全脱离文档流，父容器计算高度时直接忽略它们。
别指望 min-height 自动适配，也别只写 left 不写 right 或 width：
- 横向拉伸必须成对设置：
left: 20px; right: 20px;→ 宽度 = 父宽 − 40px - 图片类绝对定位元素，除了
width/height，还得加object-fit: contain防止比例失真 - 若需父容器动态包裹绝对定位内容，只能用 JS 读取所有子项的
getBoundingClientRect().bottom，取最大值赋给父容器style.height
table 或长文本触发意外横向滚动
<table> 不响应 <code>max-width，white-space: nowrap 的文本也不会自动换行——这两类内容会直接撑开父容器，触发 overflow-x: visible 下的横向滚动条。
不能只靠 overflow-x: hidden 截断，得从源头约束尺寸：
<table> 必须加 <code>table-layout: fixed; width: 100%，再配合word-break: break-word或overflow-wrap: break-word- 长单词或 URL，加
word-break: break-all或hyphens: auto（注意 Safari 需前缀） -
<img>和<svg></svg>必须加max-width: 100%; height: auto;，且确保其父容器有明确宽度（不能是fit-content）
实际项目里最容易被忽略的，是把“视觉可见”当成“布局参与”。比如绝对定位元素看着在那儿，父容器却算不出高度；比如 flex 子项明明写了 width，却被 flex-shrink 悄悄压扁——这些都不是样式漏写了，而是盒模型规则在按标准严格执行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
