盒模型决定元素实际占用空间，如width:300px;padding:20px;border:1px在content-box下占宽342px；外边距穿透和collapse导致对齐失效；flex/grid中盒模型仍参与总尺寸计算；块级与行内元素盒模型行为迥异。
盒模型直接决定元素“占多大地方”
页面排版不是靠想象，而是靠浏览器按盒模型逐个计算每个元素的**实际占用空间**。比如你写 width: 300px; padding: 20px; border: 1px solid，在默认 box-sizing: content-box 下，这个盒子真正在页面里占宽是 300 + 20×2 + 1×2 = 342px——如果父容器只有 320px 宽，它就会溢出或换行。很多“明明设了 width 却撑破容器”的问题，根源就在这里。
margin 穿透和 collapse 是对齐失效的隐形推手
给子元素设 margin-top: 30px，结果整个父容器被往下顶了一截？这不是 bug，是外边距穿透（margin collapse）：当父元素没 border、没 padding、没内容、也没触发 BFC 时，子元素的上外边距会“冒出来”，直接作用到父容器上。
- 验证方法：开发者工具 → 选中父元素 → Computed 标签页看
margin-top值是否等于子元素的值 - 可靠解法（按推荐顺序）：
padding-top: 1px、border-top: 1px solid transparent、或overflow: auto（注意滚动条副作用） - 别用
float或position: relative治这个病——它们会引入新问题
flex/grid 布局里，盒模型依然算总账
即使用了 display: flex，每个子项仍是独立盒子，它的 width、padding、border 全部计入总尺寸。一个设了 flex: 1; padding: 16px 的项目，在 content-box 下可能因 padding 撑开导致换行；而加一句 box-sizing: border-box，就能让 padding 和 border “塞进” width 里，布局立刻可控。
- 强烈建议全局重置：
* { box-sizing: border-box; }（包括input、textarea、伪元素） - 在 flex 项上混用
width和flex-basis容易冲突，除非你明确想覆盖默认行为 - 间距优先用
gap，而不是靠margin——它不干扰 flex 计算，也不引发 collapse
块级 vs 行内元素的盒模型表现完全不同
块级元素（如 div、p）的 width/height/padding/margin 全部生效；但行内元素（如 span、strong）的 height、垂直方向 padding 和 margin 是无效的——它只按行高（line-height）和字体本身“撑开”高度。想让文字上下留白？得用 line-height 或包一层 display: inline-block 的容器。
立即学习“前端免费学习笔记（深入）”；
- 行内块元素（
img、input）是特例：能设宽高，但相邻元素间有看不见的空白（来自 HTML 换行符），用font-size: 0或负margin可消 - 文本水平居中靠父元素
text-align: center，不是给文本自己设
盒模型不是理论概念，它是浏览器渲染每一像素的底层算式。任何对齐偏差、溢出、错位，几乎都能回溯到 content/padding/border/margin 四者之一的尺寸或行为没被真正理解。尤其在响应式场景下，box-sizing 不统一、margin 乱用、inline 元素误当块用——这三个点，90% 的布局调试时间都耗在这儿。
