子元素 margin 撑不开父容器是因外边距折叠，需触发 BFC（如 display: flow-root）；width: 100% 溢出因 box-sizing 默认为 content-box，应设 border-box；absolute 定位需父设 position: relative；Flex 中 margin: auto 可居中，前提父为 flex 且未覆盖对齐属性。
子元素的 margin 为什么撑不开父容器？
因为父容器默认没有建立新的块级格式化上下文（BFC），子元素的上/下 margin 会与父容器“合并”——也就是常说的外边距折叠。这不是 bug，是 CSS 规范定义的行为。
- 常见错误现象：
div里套一个h2，给h2加了margin-top: 20px，结果整个父div顶部没空隙，反而父容器整体往下移了 - 解决方法：让父容器触发 BFC，比如加
overflow: hidden、display: flow-root或float: left -
display: flow-root是最干净的选择，语义明确且不影响布局流；overflow: hidden在有滚动需求时可能误伤内容 - 注意：Flex 或 Grid 容器天然具有 BFC 行为，所以用
display: flex包一层也能破折叠，但会改变子项默认排列方式
padding 和 border 怎么影响子元素的 width: 100%？
当父容器设置了 padding 或 border，而子元素写 width: 100% 时，它会按父容器的 content-box 宽度计算，结果子元素实际宽度 = 父 content 宽度 + 自身 padding/border，大概率溢出。
- 典型场景：卡片组件里放一个满宽按钮，按钮右边总被截掉几像素
- 根本原因：CSS 默认盒模型是
box-sizing: content-box，width不含 padding 和 border - 推荐做法：全局重置
* { box-sizing: border-box }，这样width: 100%就真等于“占满父容器可视区域” - 如果不能改全局，至少给嵌套容器加
box-sizing: border-box，尤其涉及padding的 wrapper
用 position: absolute 的子元素，怎么让它相对于父容器定位？
绝对定位元素默认相对于最近的「已定位祖先元素」（即 position 为 relative、absolute、fixed 或 sticky 的父级），不是 DOM 上最近的父 div。
- 常见错误现象：子元素设了
top: 0; left: 0，却飞到页面左上角去了 - 必须确保直接父容器有
position: relative（或其他非static值），否则继续往上找，直到 - 注意：
position: relative本身不改变文档流位置，只是“开个口子”，让子元素能以它为参考系 - 别滥用
position: absolute做布局，它会让子元素脱离流，父容器高度可能塌陷——这时候得手动设高或用其他方式撑开
Flex 子项的 margin: auto 为什么能居中？
在 Flex 容器中，margin: auto 不再只是“自动分配剩余空间”，而是被赋予了对齐能力：它会吸走主轴和交叉轴上的所有可用自由空间，从而实现真正的居中。
- 使用场景：图标按钮里居中一个
svg，或者弹窗里垂直水平居中内容 - 关键前提：父容器必须是
display: flex，且不能同时设justify-content和align-items覆盖行为 - 横向居中只需
margin: 0 auto，纵向居中需margin: auto（四边都 auto） - 兼容性注意：IE10+ 支持，但 IE10/11 对
margin: auto的交叉轴支持不稳定，生产环境建议搭配align-items: center保底
父容器是否创建 BFC、盒模型类型、定位上下文、Flex 的自由空间分配逻辑——这四个点只要漏掉一个，嵌套容器的表现就容易“看起来没问题，上线就错”。尤其在组合使用时，比如给一个 display: flex 的父容器又加了 overflow: hidden，BFC 和 Flex 行为会叠加，得想清楚谁在主导尺寸计算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
