盒模型概念与box-sizing
CSS 里每个元素都被看作一个矩形盒子，从内到外依次是：content（内容）→ padding（内边距）→ border（边框）→ margin（外边距）。理解这四层，就理解了元素尺寸与间距的全部来源。
盒模型有两种计算模式，由 box-sizing 控制：
content-box（默认）：width 只算内容区，加上 padding 和 border 后，实际占位比 width 大，常常「撑破」布局。border-box：width 直接等于「内容 + padding + border」的总和，写多少就是多少，直观可控。
业界共识是全站统一使用 border-box，一条通配规则即可搞定，之后设置尺寸不再需要心算加减。
本节要点盒子 = 内容 + 内边距 + 边框 + 外边距；默认 content-box 会让实际尺寸变大；开发前全局设置
box-sizing: border-box。CSS
<style>
* { box-sizing: border-box; } /* 全局改为 border-box */
.a, .b {
width: 200px; height: 60px;
padding: 20px; border: 5px solid teal;
}
/* a：默认模式，实际宽 = 200 + 40 + 10 = 250px */
.a { box-sizing: content-box; }
/* b：border-box，实际宽就是 200px */
.b { box-sizing: border-box; }
</style>
<div class="a">content-box 实际 250px</div>
<div class="b">border-box 实际 200px</div>📚 推荐阅读
来自万象云档的免费在线书籍，点击封面直接阅读