核心内容摘要
百度竞价技术
蜘蛛池蚰蜒吗
为什么两个div的margin会“手牵手”变成一个人？为什么给元素加了padding，它就像充气一样变大了？今天我们用快递包裹的比喻，一次搞懂CSS盒模型的所有坑。 每个HTML元素在页面上都是一个“盒子”。浏览器渲染页面时，会计算每个盒子的尺寸和位置，这套规则就是盒模型。看似简单，但margin塌陷、box-sizing的选择等问题，经常让新手（甚至老手）抓狂。今天我们就来彻底拆解盒模型，让你不再为布局发愁。 想象你在寄一个快递，盒模型由内到外包括四部分：content（内容）：快递本身，比如你买的书。对应元素的文本、图片等内容。padding（内边距）：填充物，比如气泡膜，保护内容。它在边框内部，会扩大元素占位但不会影响与其他元素的距离。border（边框）：快递纸箱的厚度，包裹着内容和填充物。margin（外边距）：快递在车厢里与其他快递之间的间隙，用于隔开相邻元素。 在CSS中，一个元素的实际占位宽度 = （标准盒模型下）。注意，背景色会延伸到padding区域，但不会到margin。 CSS有两种盒模型，区别在于的计算范围不同。标准盒模型（content-box）：只包含内容宽度，padding和border额外增加。这是浏览器的默认行为。怪异盒模型（border-box）：包含内容、padding和border的总和。也就是说，你设的宽度就是最终占据的宽度（不含margin），padding和border会向内挤。 看个例子： 在标准盒模型下，盒子实际占宽 = 200 + 202 + 52 = 250px，再加左右margin就是270px。在怪异盒模型下，盒子内容区宽度 = 200 - 202 - 52 = 150px，但总占宽（不含margin）仍为200px。 用哪个好？ 现代开发几乎都推荐，因为它更符合直觉：你设多少，盒子占多少（不含margin）。很多框架（如Bootstrap）也重置了全局。 margin塌陷是CSS里最反直觉的现象之一，主要有三种情况。 两个块级兄弟元素，上面的margin-bottom和下面的margin-top会合并，取两者最大值，而不是相加。 最终两个盒子的间距是30px，不是50px。 生活比喻：两个人站在一起，一个人后退20cm，另一个后退30cm，最终他们之间的距离是30cm（远的那个决定了距离），而不是50cm。 当父元素没有边框、padding、内容等隔开时，子元素的margin-top会“传递”给父元素，导致父元素一起下移。 你希望子元素距离父元素顶部30px，但实际上父元素整体下移了30px，子元素紧贴在父元素顶部。 原因：父元素的第一个子元素的margin-top会与父元素的margin-top合并，如果父元素没有隔离（如border、padding、overflow等），就会发生这种“拖家带口”的现象。 一个空的块元素（没有内容、padding、border、高度），它的上下margin也会合并，最终取最大值。 这个空盒子的上下margin合并为30px，导致与下面元素的实际间距是30px，而不是50px。 既然知道了坑，我们就有多种办法填平它。 这就像在父子之间加了一道“隔离墙”，阻止margin传递。 BFC可以看作一个独立的领地，内部元素不会影响外部。触发BFC的方法有：（推荐，无副作用） 例如： 现代布局方式天然避免了margin塌陷，因为flex/grid容器的子元素在布局时不再遵循常规流中的margin合并规则。 用padding代替margin（但要注意对盒子尺寸的影响）。用一个空元素或伪元素隔开，但不太优雅。改成flex/grid布局，或者给其中一个元素套一个触发BFC的父级。 当你给一个元素增加padding或border，它的实际占位会变大（在标准盒模型下），这可能破坏布局。这也是为什么我们推荐的原因。 例如，你要做一个宽度50%的卡片，内边距20px。如果用标准盒模型，你得手动计算：。如果用border-box，直接写，完美。 小技巧：调试时可以在浏览器开发者工具中查看盒模型的可视化，Chrome的Computed面板会清晰展示各部分尺寸。盒有四部：内容、内边、边框、外边。尺寸计算有两种：标准向外扩，怪异向内缩。开发首选。margin塌陷三场景：兄弟上下合，父子无墙则传递，空盒自身折。解决有妙招：加border/padding、BFC结界、flex/grid来帮忙。padding和border会撑大盒子，让你更省心。 掌握盒模型，你就掌握了CSS布局的“物理法则”。下次再遇到margin合并，你就能淡定地掏出BFC这道护身符。希望这篇文章对你有帮助，欢迎留言分享你遇到的盒模型趣事！ 明日预告：Flexbox完全指南——从“一维战神”到“布局神器”，手把手教你玩转弹性盒子。
