box-sizing默认content-box导致padding使总宽超预期，应全局设border-box；margin会合并，需单边设置或父容器隔离；flex子项宽高失效因默认flex属性，需显式设置；grid中fr按剩余空间分配，混用像素值需注意计算逻辑。
box-sizing 默认值导致 padding 溢出容器宽度
多数人写 width: 300px; padding: 20px; 时，以为内容区宽 300px，实际浏览器按 box-sizing: content-box（默认）计算：总宽 = 300 + 20×2 = 340px。这会让并排的盒子换行、超出父容器或触发横向滚动。
- 统一设为
box-sizing: border-box是最稳妥做法，所有尺寸声明即最终渲染尺寸 - 全局重置推荐写法：
* { box-sizing: border-box; } - 注意：伪元素
::before/::after也需单独设置，否则可能不继承 - 旧版 IE8- 不支持
border-box，但现代项目基本可忽略
margin 合并（collapsing）破坏垂直间距预期
相邻块级元素的上下 margin 会合并成一个，取较大值。比如两个 div 分别设 margin-bottom: 20px 和 margin-top: 30px，实际间距只有 30px，不是 50px。
- 常见于列表项、段落、标题之间，容易误判布局高度
- 避免方式：只用单边 margin（如统一用
margin-bottom），或给父容器加overflow: hidden/padding: 0.1px - 父子 margin 合并更隐蔽：子元素
margin-top可能“顶穿”父容器上边框——此时给父容器设padding-top: 1px或border-top: 1px solid transparent即可隔离
flex 容器中 width/height 失效的常见原因
在 display: flex 的容器里，子项的 width 或 height 常被忽略，尤其当父容器未设明确尺寸或子项未设 flex 相关属性时。
- 根本原因是：flex 子项默认
flex: 0 1 auto，其中flex-shrink: 1允许压缩，flex-basis: auto优先按内容宽高计算 - 想固定宽度？显式写
flex: 0 0 200px（不伸缩、不收缩、基准 200px） - 父容器若没设
height，子项设height: 100%无效——% 高度需依赖有明确高度的父级，flex 容器本身不自动提供 - 慎用
min-width: 0：当子项含长文本或图片时，flex 默认会强制撑宽，加此属性才允许收缩
grid 布局中 fr 单位与像素值混用的陷阱
1fr 不是“1份”，而是“剩余可用空间均分”。一旦和固定像素值（如 200px）并列，计算逻辑立刻变复杂。
立即学习“前端免费学习笔记（深入）”；
- 例如
grid-template-columns: 200px 1fr 2fr：先扣掉 200px，再把剩下空间按 1:2 分配给后两列 - 如果内容超限，
fr列不会缩小——除非加minmax(0, 1fr)强制允许压缩 -
auto和fr并存时（如auto 1fr），auto先按内容定宽，剩余才给1fr；但若内容过宽，auto仍会溢出，需配合min-width: 0和overflow: hidden - 调试建议：用浏览器 devtools 的 layout 面板直接看每列实际分配值，比猜更可靠
盒模型本身不难，难的是它和 flex/grid 这些现代布局机制交织时，各层默认行为叠加产生的隐性效果。真正卡住人的，往往不是“不会写”，而是“写了但不知道为什么没按想的那样渲染”。
