页面对不齐主因是盒模型理解偏差，应检查box-sizing（建议全局设为border-box）、margin合并、padding/border一致性及vertical-align对齐方式。
页面整体对不齐，往往不是某一行代码写错了，而是盒模型的理解或应用出现了偏差。从 盒模型 入手排查，能快速定位到真正影响布局对齐的根源。
检查是否启用了标准盒模型（box-sizing）
默认情况下，元素使用的是 content-box 盒模型：width/height 只包含内容区，padding 和 border 会额外撑大元素。如果多个元素设置了相同 width，但有的加了 padding、有的加了 border，视觉上就会错位。
- 用浏览器开发者工具选中错位元素，看右侧面板中的 Computed 标签页，确认
box-sizing值 - 建议全局统一设为
border-box：* { box-sizing: border-box; } - 这样设置后，width/height 就代表“最终占位宽度”，更符合直觉，也利于对齐
确认外边距（margin）是否发生合并或意外叠加
相邻块级元素的垂直 margin 会发生 外边距合并（margin collapse），导致实际间距不符合预期，进而让整行/整列看起来偏移。
- 常见于标题（h1~h6）、段落（p）、列表（ul/ol）等默认有 margin 的元素之间
- 用开发者工具查看元素上下 margin 实际生效值，注意观察是否被合并（比如两个 20px 的 margin 合并成一个 20px，而非 40px）
- 避免方式：给父容器设置
overflow: hidden或padding: 0.1px，或改用 padding 替代 margin 控制间距
验证内边距（padding）和边框（border）是否参与对齐计算
即使启用了 box-sizing: border-box，如果某些元素漏写了 padding/border，而其他同类元素写了，它们的 实际占位尺寸仍会不同，造成对不齐。
立即学习“前端免费学习笔记（深入）”；
- 例如：两个并排的卡片，一个有
padding: 16px，另一个没写，即使 width 都是 200px，在 border-box 下前者内容区变小，但整体宽仍是 200px；可一旦背景、阴影、字体大小等不一致，视觉上就容易“飘” - 建议用开发者工具逐个对比同类元素的 Layout 面板，看
Width、Height、Padding、Border是否完全一致 - 对齐前先做“归零”：重置关键元素的 margin/padding/border，再统一添加
留意行内元素与基线（baseline）对齐带来的隐形偏移
当容器中混用 inline 或 inline-block 元素（如文字、按钮、图标、图片），它们默认按 baseline 对齐，而图片、input 等元素底部常留空白，造成“下沿不齐”。
- 典型表现：文字旁放一个图标或按钮，看起来总比文字低一点
- 解决方法：给相关元素设置
vertical-align: top/middle/bottom，或统一设为vertical-align: middle - 更彻底的方式：把这类元素都设为
display: flex容器内的子项，用align-items: center控制垂直对齐
不复杂但容易忽略。盒模型不是概念背诵题，而是每次点击“检查元素”时，都要下意识扫一眼的那几行数值：width、padding、border、margin、box-sizing、vertical-align——对齐问题，八成藏在里面。
