前端开发系列02：掌握 CSS 盒模型，避免布局踩坑

理解 content/padding/border/margin 与 box-sizing 的关系，才能稳定控制尺寸。

2026-06-20

目标 不再被“明明写了 100 像素却超宽”这类问题打断。 核心公式 默认 content-box 下，元素总宽度是 width + padding + border。改用 border-box 后，width 包含边框和内边距，布局更直观。 常见问题 inline 元素不能直接设置宽高。 inline-block 会受基线和空白字符影响。 margin 叠加是块级元素上方向/下方向最容易忽略的来源。 建议 先统一 { box-sizing: border-box; } 再进入复杂布局，这一步对所有组件都会有持续收益。