CSS盒模型是网页布局的核心，包含内容、内边距、边框和外边距四部分；默认content-box模式下宽度仅指内容区域，而border-box模式下宽度包含内边距和边框，推荐全局设置box-sizing: border-box以简化布局计算；此外，垂直外边距可能发生折叠，可通过Flexbox、Grid、BFC等方式避免。
CSS盒模型，说白了，就是浏览器渲染网页元素时，把每个HTML元素都当成一个矩形的盒子来处理。这个盒子不单单是你看到的内容，它还包括了内容区域、内边距（padding）、边框（border）和外边距（margin）这四个部分。理解它，是掌握网页布局最基础也是最核心的钥匙。
在我的实践中，CSS盒模型是构建任何网页布局的基石。想象一下，你正在设计一个房间，盒模型就是你规划每个家具（元素）占据的空间。每个元素都有其“内容”——比如文字或图片，这就像家具本身。围绕内容，你可以给它留出一些“呼吸空间”，这就是内边距（padding），它在内容和边框之间，是内容的一部分，背景色会延伸到这里。再往外，是边框（border），它就像家具的边缘或装饰线，有粗细、颜色和样式。最后，边框之外还有外边距（margin），这就像家具与家具之间，或者家具与墙壁之间的空隙，用来控制元素与周围元素的距离，这部分是完全透明的，不属于元素本身的背景。
为什么理解CSS盒模型对网页布局至关重要？
我常常觉得，很多人在刚接触前端时，对CSS布局的困惑，十有八九都和盒模型理解不深有关。它不仅仅是一个概念，更是你预测元素大小、位置，以及它们之间如何相互作用的底层逻辑。你想想看，如果你不清楚一个元素的实际宽度到底包含了哪些部分，你怎么能准确地排版？
比如说，你设定了一个
width: 200px的
div，然后又加了
padding: 10px和
border: 1px solid black。如果你不理解盒模型，你可能会天真地以为这个
div的实际宽度还是
200px。但实际上，在默认的
content-box模式下，它的实际宽度会变成
200px + 10px(左padding) + 10px(右padding) + 1px(左border) + 1px(右border) = 222px。这多出来的22px，在复杂的布局中，足以让你的元素错位，甚至把整个页面撑开，出现水平滚动条。我个人就遇到过无数次这样的情况，排查起来简直是噩梦。
立即学习“前端免费学习笔记（深入）”；
所以，理解盒模型，就是理解浏览器在背后默默做的事情，它能让你在编写CSS时，对布局有更精准的预判和控制，避免那些让人头疼的“意外”。它让你可以更自信地处理响应式设计，确保在不同屏幕尺寸下，元素的尺寸和间距依然符合预期。
content-box与border-box有什么区别？该如何选择和应用？
这是CSS盒模型里一个非常关键的分水岭，也是我个人在项目开发中会特别关注的点。默认情况下，CSS使用的是
box-sizing: content-box。这意味着你给元素设置的
width和
height，仅仅作用于内容区域（content box）。前面提到的那个
200px宽的
div例子，就是
content-box的表现。这种模式下，如果你想让一个元素的总宽度是
200px，你就需要手动计算并从
width中减去
padding和
border的宽度，这在布局复杂时非常容易出错，而且维护起来也很麻烦。
而
box-sizing: border-box则完全不同。当你设置
box-sizing: border-box时，你给元素设置的
width和
height，将包含内容区域、内边距（padding）和边框（border）。也就是说，如果你设置
width: 200px，那么这个
200px就是从边框外边缘到边框外边缘的总宽度。
padding和
border都会被“吸纳”到这个
200px里面，而不会额外增加元素的总尺寸。内容区域的宽度会相应地缩小。
我个人强烈推荐在几乎所有项目中使用
border-box。这简直是布局神器，它让元素的尺寸计算变得直观和可预测。你不再需要为
padding和
border额外计算空间，这大大简化了布局的复杂性，尤其是在做响应式布局，或者使用
flexbox、
grid时，它的优势更加明显。
通常，我会在CSS文件的开头，或者在我的CSS reset里，加上这一行：
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}这样一来，所有元素都继承了
border-box的特性，布局体验会好上太多。这种全局设置能让你从计算的泥潭中解脱出来，更专注于设计本身。
CSS盒模型中的外边距折叠（Margin Collapse）是怎么回事？如何避免？
外边距折叠（Margin Collapse）是CSS盒模型中一个非常“有趣”的特性，它经常让新手甚至是一些有经验的开发者感到困惑。简单来说，当两个垂直方向上的外边距相遇时，它们并不会简单地相加，而是会折叠成两者之间较大的那个外边距。
这通常发生在以下几种情况：
-
相邻兄弟元素的外边距折叠： 比如，一个
p
元素的margin-bottom
与它紧邻的下一个p
元素的margin-top
会折叠。如果第一个p
有margin-bottom: 20px
，第二个p
有margin-top: 30px
，那么它们之间的实际距离不是50px
，而是30px
。 -
父元素与第一个/最后一个子元素的外边距折叠： 如果父元素没有
border
、padding
、inline-block
、float
或overflow
属性来“隔开”它与子元素，那么父元素的margin-top
可能会和它第一个子元素的margin-top
折叠；同理，父元素的margin-bottom
也可能和它最后一个子元素的margin-bottom
折叠。 -
空块级元素的外边距折叠： 如果一个块级元素没有任何内容、
border
、padding
，它的margin-top
和margin-bottom
也会折叠。
说实话，这种机制有时候挺反直觉的，尤其是在你期望精确控制元素间距的时候。我记得有一次，我为一个标题和下面的段落设置了
margin，结果怎么看间距都不对，最后才发现是外边距折叠在作怪。
那么，如何避免外边距折叠呢？这里有几种常用的方法：
-
使用
padding
或border
： 在父元素和子元素之间添加padding
或border
，就能“打破”它们之间的折叠关系。 -
使用
overflow: hidden
： 给父元素设置overflow: hidden
（或者scroll
、auto
），可以创建一个新的块格式化上下文（Block Formatting Context, BFC），从而阻止父子元素之间的外边距折叠。不过要注意overflow: hidden
可能带来的裁剪效果。 -
使用
display: flex
或display: grid
： 弹性盒子（Flexbox）和网格布局（Grid Layout）的子元素之间不会发生外边距折叠。这是我个人最喜欢和推荐的方法，因为它们提供了更强大的布局能力，并且天然地解决了外边距折叠的问题。 -
浮动元素（
float
）： 浮动元素也会创建BFC，从而避免外边距折叠。但浮动本身会带来其他布局问题，现在已经很少作为解决外边距折叠的首选方案了。 -
绝对定位元素（
position: absolute
）： 绝对定位的元素会脱离文档流，因此也不会参与外边距折叠。 -
行内块元素（
display: inline-block
）： 将元素设置为inline-block
也可以阻止其与父元素的外边距折叠，但它会改变元素的显示行为。
在我看来，最现代且最推荐的解决方案是拥抱
flexbox或
grid。它们不仅解决了外边距折叠的问题，还提供了更强大的布局能力，让你可以更轻松地构建复杂的响应式界面。如果只是简单的块级元素间距，偶尔用
padding或者父元素的
overflow: hidden也是可以接受的。
