页面对齐不准主因是盒模型理解偏差，真实宽度=width+padding+border+margin；应设box-sizing:border-box、善用flex布局、注意display类型与vertical-align适用范围，并用outline调试边界。
页面对齐不准，八成是盒模型没理清，不是代码写错了，而是没真正理解元素怎么占空间、怎么对齐。
盒模型决定“真实尺寸”，别只看width/height
CSS中每个元素都像一个带边框的盒子，它的真实宽度 = width + padding + border + margin（左右方向同理）。很多人设了red">width: 200px，但实际占位远不止200px，尤其加了padding或border后，又没用box-sizing: border-box，就容易错位、溢出、换行。
- 默认box-sizing: content-box：width只算内容区，padding和border额外加
- 推荐全局设置：*, *::before, *::after { box-sizing: border-box; }，让width包含padding和border，更符合直觉
- 用浏览器开发者工具（F12）选中元素，看右侧“Computed”面板里的实际尺寸和布局，比猜靠谱得多
对齐≠随便加text-align或margin: auto
text-align: center只对**行内内容**（文字、图片、inline元素）起作用；margin: 0 auto能让**块级元素水平居中**，但前提是它有明确宽度（不能是width: auto且父容器未设宽）。
- 想让一个div水平居中：设width + margin: 0 auto
- 想让子元素在父容器里垂直居中：单行文本可用line-height = height；多行或块级内容推荐用display: flex + align-items: center
- 避免滥用float做布局——它会脱离文档流，导致父容器塌陷、后续元素错位，初学建议直接跳过
父容器的display类型，悄悄影响对齐效果
一个div默认是display: block，独占一行；span默认是display: inline，不响应width/height/margin-top/bottom。如果你给inline元素设了width，它不会变宽，但可能破坏行高或换行逻辑。
立即学习“前端免费学习笔记（深入）”；
- 需要控制尺寸和外边距？优先把它变成display: inline-block（保留行内特性，又支持宽高）
- 要做灵活对齐（比如居中、等分布局）？直接上display: flex，父容器设justify-content和align-items，简单清晰
- 别忽略vertical-align——它只对inline/inline-block元素有效，常被误用于flex或block子项，结果毫无反应
调试小技巧：临时加轮廓，看清边界
对齐问题看不清？给可疑元素加一句：outline: 1px solid red;（注意不是border，outline不占布局空间）。这样能立刻看到它的实际边界，判断是不是padding撑开、margin重叠、或者浮动跑偏。
- 检查父子关系：父容器有没有overflow: hidden意外裁剪？有没有transform造成视觉偏移？
- 检查默认样式：ul/ol有默认padding-left，button/input有浏览器内置margin，用* { margin: 0; padding: 0; }或CSS Reset可减少干扰
- 用display: grid做简单栅格时，别忘了grid-template-columns定义列宽，否则子项可能按内容挤在一起
