盒模型由content、padding、border、margin四层嵌套构成，width/height默认仅控制content；box-sizing: content-box下总宽=width+2×padding+2×border，border-box下width包含content+padding+border，margin始终不参与计算。
盒模型的四个组成部分必须分清：content、padding、border、margin
新手常把 width 和 height 当成“整个盒子大小”，其实它们默认只控制 content 区域。盒模型真正由四层嵌套构成：content（内容区）→ padding（内边距）→ border（边框）→ margin（外边距）。这四者共同决定元素在页面中占据的空间和与其他元素的距离。
容易混淆的点在于：浏览器默认使用 box-sizing: content-box，此时设置 width: 200px 指的是 content 宽度；如果加了 padding: 10px 和 border: 2px solid #000，实际占用宽度是 200 + 2×10 + 2×2 = 224px —— 很多人会误以为“我设了 200px，怎么变宽了？”
用 box-sizing: border-box 统一计算逻辑
现代开发几乎都推荐全局重置为 border-box，它让 width 和 height 表示“content + padding + border”的总尺寸，更符合直觉。
- 所有新项目建议在 css 开头加上：
* { box-sizing: border-box; } - 这样写
width: 200px; padding: 15px; border: 1px solid #ccc;，最终 content 宽度自动压缩为200 − 2×15 − 2×1 = 168px，总占用仍是 200px -
margin始终不参与box-sizing计算，它永远“在外面”，不影响 width/height 的含义
调试时怎么看真实尺寸？别只信开发者工具的“尺寸面板”
chrome/firefox 的元素检查器显示的“Computed”尺寸，取决于当前 box-sizing 值，但新手常忽略右上角的小箭头展开细节：
立即学习“前端免费学习笔记（深入）”；
- 展开后能看到
content、padding、border、margin各自的数值，这才是真实分层 - 如果发现布局错位，优先看
margin是否意外塌陷（比如相邻块级元素的上下 margin 合并） - 注意：
padding和border会影响内部 content 的可用空间，但不会触发父容器的滚动条（除非父容器设置了overflow: hidden且子元素溢出）
实际布局中 padding/border 对齐容易翻车
当多个元素并排（如按钮组、表单控件），若部分有 border、部分没有，或 padding 不一致，视觉高度就会错位——即使 height 值相同。
解决办法不是硬调 height，而是统一基线：
- 确保同组元素使用相同的
box-sizing（推荐border-box） - 用
padding控制内部留白，避免依赖height精确对齐 - 如果必须用
border，给无边框元素加border: 1px solid transparent占位 - 行内元素（如
）受line-height影响更大，盒模型只是基础，别只盯着 padding
真正卡住新手的往往不是概念记不住，而是改了 padding 没意识到它吃掉了 content 空间，或者忘了 margin 会合并。打开开发者工具，把鼠标悬停在元素上，盯住那个分层尺寸图，比背定义管用十倍。