引言
很多人写 CSS 时遇到过这种困惑：明明给元素设了固定宽度，结果它在页面上占的位置却比设定值大。或者两个元素各占一半宽度，并排放置却换行了。问题往往出在盒模型上。盒模型是 CSS 布局的地基，理解它，你才能准确控制元素的大小和排布。这篇文章只讲这一个问题。
一、盒子由哪几部分组成
在 CSS 眼里，页面上的每个元素都是一个矩形盒子。这个盒子从内到外由四层组成。
内容区是最里面的一层，存放文字、图片等实际内容。你设置的宽度和高度，默认作用于这一层。
内边距是内容区和边框之间的空白，像包装盒里的填充物，把内容和边框隔开。
边框是盒子的外框，有粗细、样式、颜色。
外边距是盒子与其他盒子之间的空白，不占盒子自身的大小，但影响盒子在页面上的位置。
四层加起来，构成一个完整的盒子。理解每一层的作用，是理解盒模型的第一步。
二、默认盒模型的"坑"
默认情况下，元素设置的宽度和高度只包括内容区，不包括内边距和边框。
这意味着：你设了宽度一百，又加了左右各十的内边距、各一的边框，元素实际占的宽度就变成了一百二十二。你以为它是一百，实际它更宽。
这就是为什么"设了固定宽度，元素还是变宽了"。因为宽度只管内容，内边距和边框是额外加上的。
这个设定在早期是为了方便，但在实际布局中经常带来麻烦。尤其是做响应式布局时，加个内边距就可能撑破容器。
三、另一种盒模型
CSS 提供了另一种盒模型，可以改变宽度的计算方式。
在这种模型下，设置的宽度包括内容、内边距和边框。也就是说，你设宽度一百，元素总占宽就是一百，内边距和边框从这一百里扣，内容区自动缩小。
这种模型更符合直觉：我说多宽就多宽，加内边距不会撑大盒子，只会压缩内容空间。
现代开发中，很多项目会全局切换成这种模型，因为布局时不用反复计算内边距和边框带来的额外宽度，心智负担小很多。
四、两种模型的适用场景
默认模型适合什么场景？当你希望内容区严格保持某个尺寸，内边距和边框作为额外装饰加在外面时。比如某些需要精确控制内容区域的场景。
另一种模型适合什么场景？绝大多数常规布局。尤其是响应式设计，元素宽度按百分比分配时，加内边距不会导致总宽超出容器，布局更稳定。
实际项目中，没有绝对的对错，关键是团队统一、心里有数。最怕的是有人用一种、有人用另一种，算尺寸时各算各的，布局就乱了。
五、外边距的特殊行为
外边距有几个容易忽略的特性。
外边距不参与盒子的宽度计算。 它影响的是盒子之间的间距，不是盒子本身的大小。所以两个盒子并排时，外边距会让它们分得更开，但不会让单个盒子变宽。
垂直外边距会合并。 两个上下相邻的元素，它们之间的外边距不是相加，而是取较大值。这叫外边距塌陷。很多人发现"设了间距，实际间距比预期小"，就是这个原因。
负外边距可以制造重叠。 外边距可以是负值，让元素向反方向移动，甚至与其他元素重叠。这是高级布局技巧，但用不好会很难维护。
理解这些特性，才能准确预测元素在页面上的实际位置。
六、怎么查看盒模型
浏览器开发者工具可以直观查看盒模型。选中一个元素，会显示它的内容区、内边距、边框、外边距各自的尺寸和颜色。
这是排查布局问题最快的方式。当你觉得"这个元素怎么这么宽"，打开工具看一眼，就知道是内边距撑的、边框加的，还是外边距影响的。
养成用工具查看盒模型的习惯，比凭感觉猜要可靠得多。
七、总结
盒模型由内容、内边距、边框、外边距四层组成。默认模型下，宽度只算内容，内边距和边框额外增加总宽；另一种模型下，宽度包含内边距和边框，更符合直觉。外边距不占盒子大小，但会影响位置，垂直方向还会合并。理解这套规则，你才能准确控制元素尺寸，不再被"设了宽度却变宽"困扰。这是 CSS 布局的第一课。
