17370845950

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 这些现代布局机制交织时，各层默认行为叠加产生的隐性效果。真正卡住人的，往往不是“不会写”，而是“写了但不知道为什么没按想的那样渲染”。