先学盒子大小计算再学定位，标准盒模型中width仅含内容区，加padding和border会撑大盒子；推荐全局设box-sizing:border-box，使width表示最终像素宽度。
先搞懂「盒子怎么算大小」，再学怎么摆位置——这是最不踩坑的学习顺序。
从 content 和 width/height 开始，别一上来就写 margin
很多人卡在“明明设了 width: 200px，盒子却占了 240px”，本质是没意识到 padding 和 border 默认会撑大盒子。标准盒模型（box-sizing: content-box）下：
-
width只管内容区，不包含padding和border - 加
padding: 10px+border: 5px，实际宽度 = 200 + 20 + 10 = 230px - 浏览器默认用的就是这个模型，所以初学者最容易懵
建议第一步：手动画一个 div，只设 width/height，再用开发者工具的「Computed」面板看「Actual size」，对比「content box」和「border box」数值差异。
立刻配 box-sizing: border-box，全局统一计算逻辑
不用死记公式，直接让 width 表示“最终占多少像素”——这是现代 CSS 布局的事实标准。
立即学习“前端免费学习笔记（深入）”；
* {
box-sizing: border-box;
}- 所有元素（包括
input、textarea等表单控件）都按 border-box 计算 - 加
padding或border不会撑开盒子，内容区自动压缩 - 避免因不同元素默认盒模型行为不一致导致的错位（比如
input在某些浏览器里默认是 border-box，div是 content-box）
margin 和 padding 别混着练，先分清“谁动谁”
新手常把 margin 当成“让内容离边框远点”，结果用了 margin-top 却发现整个盒子往下跑了——这是典型的混淆了「内距」和「外距」。
-
padding：内容往里缩，背景色会延伸进来 -
margin：盒子整体往外推，背景色不延伸，还可能触发外边距塌陷（比如父子块级元素上边距合并） - 水平居中必须用
margin: 0 auto，但前提是元素有明确width且是块级（display: block）
实操建议：单独建两个测试块，一个只加 padding: 20px，一个只加 margin: 20px，用不同背景色+边框，拖动鼠标看高亮区域变化。
别跳过表格边框合并这个“小坑”
写表格时发现边框又粗又丑？不是样式写错了，是默认相邻单元格边框各自渲染，叠加出双倍粗细。
- 加一句
border-collapse: collapse就能强制合并 - 它只对
table元素生效，不影响其他盒子 - 不写这句，
border: 1px solid #ccc在表格里可能实际显示为 2px
这个细节虽小，但上线后被产品指着问“为什么表格线这么粗”，比写错 flex 还容易当场尴尬。
盒模型真正难的不是记住四个层，而是每次改一个值时，脑子里要同步反应出它影响的是「自身尺寸」还是「与其他盒子的距离」——这种直觉，靠画图+调试器反复验证，比背概念快得多。
