盒模型默认为content-box，width不包含padding和border；flex对齐需父容器设display:flex；margin会折叠；字体行高由ascent/descent和line-height共同决定。
盒模型默认是 content-box，不是你看到的“整个方块”
很多初学者以为设置 width: 200px 就等于元素占位 200px 宽，结果加了 padding: 10px 或 border: 2px solid 后，实际宽度变成 200 + 20 + 4 = 224px，导致相邻模块错位、换行或超出容器。这不是 bug，是 content-box 的标准行为。
解决方法很简单：全局统一改成 box-sizing: border-box，让 width 和 height 指代“包含 padding 和 border 的总尺寸”：
*, *::before, *::after {
box-sizing: border-box;
}
这样写后，width: 200px; padding: 10px; border: 2px 的元素，内容区自动压缩为 176px，整体仍严格占满 200px —— 对齐基础就稳了。
flex 布局中 align-items / justify-content 不生效？检查父容器 display
常见错误是只给子元素设 align-self: center，但父容器仍是 display: block，此时对齐属性完全被忽略。Flex 对齐必须作用于 flex 容器本身。
立即学习“前端免费学习笔记（深入）”；
典型修复步骤：
- 确认父容器已声明
display: flex（或inline-flex） - 横向对齐用
justify-content（如space-between、center） - 纵向对齐用
align-items（适用于单行），或多行时用align-content - 若某子项需单独调整，用
align-self，但前提是父容器是 flex 容器
注意：margin: auto 在 flex 子项上也能实现居中，且兼容性更好；而 vertical-align 只对 inline 或 table-cell 有效，对 flex 子项无效。
margin 折叠导致模块间距不可控
两个上下相邻的块级元素，比如 section 和 div，各自设了 margin-top: 20px 和 margin-bottom: 20px，实际间距却只有 20px 而非 40px —— 这是 margin 折叠（collapsing margins）在作祟。
三种实用规避方式：
- 只给其中一个元素设 margin（推荐，语义清晰）
- 给父容器加
overflow: hidden或padding: 0.1px阻断折叠边界 - 改用 flex 或 grid 布局，其子项 margin 不折叠
特别注意：浮动（float）、绝对定位（position: absolute）、inline 元素都不会触发 margin 折叠，但它们会带来其他布局约束，不建议为避折叠而滥用。
字体度量和 line-height 让文字区域“看不见地撑高”
即使盒子尺寸计算无误，文字仍可能让容器高度变高、导致垂直错位。这是因为浏览器按字体的「行高线」（ascent/descent）和 line-height 渲染文本，而非单纯看 font-size。
例如：font-size: 16px; line-height: 1.5 实际行高是 24px，其中文字只占中间约 18px，上下留空由字体度量决定。如果父容器 height: 24px，又没设 overflow: hidden，文字可能溢出或顶到上边框。
调试建议：
- 用浏览器开发者工具勾选“Show layout bounds”，观察真实 content 区域与文字基线位置
- 需要精确控制垂直居中时，避免仅靠
padding，优先用display: flex; align-items: center - 如必须固定高度，可设
line-height: 1或line-height: normal并配合vertical-align: middle（仅对 inline 元素有效）
最易被忽略的一点：不同字体（如系统默认的 sans-serif vs 引入的 Inter）的 ascent/descent 差异很大，换字体后务必重新检查对齐表现。
