CSS 盒模型是什么？标准盒模型和 IE 盒模型有什么区别？

简化版

CSS 盒模型由 content、padding、border、margin 组成。标准盒模型里 width 只包含内容区，IE 盒模型里 width 包含内容、内边距和边框，实际开发常用 box-sizing: border-box 统一计算。

详细版

盒模型描述一个元素在页面中占据空间的方式：

content：内容区域。
padding：内容和边框之间的内边距。
border：边框。
margin：元素外部间距。

两种盒模型的区别在 width 和 height 的含义：

.standard {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
  border: 10px solid #000;
}

标准盒模型实际占宽是 200 + 20*2 + 10*2 = 260px。

.border {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 10px solid #000;
}

IE 盒模型实际占宽就是 200px，内容区会被压缩为 140px。

工程里通常会全局设置：

*,
*::before,
*::after {
  box-sizing: border-box;
}

这样布局更符合直觉，尤其是响应式网格和表单控件。

完整版教学

一、盒模型是 CSS 布局的基本单位

浏览器渲染页面时，每个元素都可以理解为一个矩形盒子。布局不是直接排文字，而是在排这些盒子。盒子的内部从里到外是内容、内边距、边框，盒子外面还有外边距。

margin 不属于元素自身可绘制区域，它负责和其他元素拉开距离；padding 属于元素内部空间，背景色会覆盖到 padding 区域；border 是元素边界。

二、标准盒模型为什么容易“撑破布局”

标准盒模型的 width 只表示内容区宽度，所以当你给元素加 padding 或 border 时，元素最终占据的空间会变大。

这在固定宽度布局中很容易出问题。例如父容器宽 300px，子元素写 width: 100%，再加 padding: 20px，标准盒模型下子元素实际宽度变成 340px，就会溢出。

三、border-box 为什么更适合工程开发

border-box 把 padding 和 border 都算进声明的宽高里。你写 width: 100%，元素最终就不会因为 padding 被撑大。

这并不是说标准盒模型错误，而是 border-box 更符合做页面布局时的心智模型：我说这个卡片宽 300px，它最终就应该占 300px。

四、margin 折叠是盒模型常见追问

垂直方向相邻块级元素的 margin 可能发生折叠，比如上一个元素 margin-bottom: 20px，下一个元素 margin-top: 30px，最终间距可能是 30px，不是 50px。

父子元素之间也可能发生 margin 折叠：子元素的 margin-top 可能“穿透”父元素，让父元素整体下移。常见解决办法包括给父元素加 padding、border、创建 BFC，或者使用 flex/grid 布局。

五、面试追问与工程落地

面试官很喜欢追问“box-sizing: border-box 会不会影响 margin？”答案是不会。border-box 只改变 width/height 对 content、padding、border 的计算方式，margin 仍然在盒子外部，不计入声明的宽高。

还可能追问“为什么全局设置 box-sizing 要包含伪元素？”因为 ::before、::after 也会参与布局，如果它们仍然使用默认 content-box，某些组件的装饰元素可能出现尺寸不一致。统一写成 *, *::before, *::after 是工程里的稳定做法。

另一个实战点是调试溢出。遇到横向滚动条时，可以优先检查：是否有元素 width: 100% 又加了 padding/border；是否有长单词、图片、表格撑开；是否忘了 min-width: 0。盒模型只是第一层，实际布局还要结合 Flex/Grid 的最小尺寸规则看。

六、把盒模型换算成可验证的尺寸

面试不能只说定义，还要能现场计算。设元素声明 width: 240px、左右 padding: 16px、左右 border: 2px、左右 margin: 12px，两种模型得到的尺寸如下。

`box-sizing`	内容宽度	border box 宽度	外部占位宽度
`content-box`	`240px`	`240 + 32 + 4 = 276px`	`276 + 24 = 300px`
`border-box`	`240 - 32 - 4 = 204px`	`240px`	`240 + 24 = 264px`

这里的“外部占位宽度”按没有 margin 折叠、负 margin 或其他布局算法干预的普通横向场景计算。box-sizing 不包含 margin，也不会改变 margin 的指定值。若 padding 与 border 的总和大于声明宽度，border-box 的内容区会被钳制到 0，使用后的边框盒会至少容纳 padding 与 border，因此可能直接大于声明宽度。

.card {
  box-sizing: border-box;
  width: 240px;
  padding-inline: 16px;
  border: 2px solid;
  margin-inline: 12px;
}

调试宽度溢出时，先在开发者工具里区分 content、padding、border 和 margin，再检查 Flex/Grid 的自动最小尺寸；看到横向滚动条不等于一定是盒模型算错。

七、宽高、百分比与布局算法的边界

width: 100% 的百分比通常基于包含块的宽度，但元素最终尺寸还会受 min-width、max-width、固有尺寸和所在格式化上下文影响。box-sizing 也影响 flex-basis 等尺寸属性的解释，并非只影响字面上的 width 和 height。这就是为什么同样的声明放进普通流、Flex 和 Grid 后，结果可能不同。

纵向 margin 折叠只发生在特定的块布局条件下，水平 margin 不会按同样规则折叠。相邻的 20px 与 30px 正 margin 折叠后通常取较大值 30px；若涉及负 margin，计算规则会变成正值最大值与负值绝对值最大值相加，不能简单套“取最大值”。

现象	优先检查	常见修复方向
`width: 100%` 后横向溢出	`box-sizing`、padding、border	使用 `border-box` 或调整尺寸表达
Flex 文本撑开容器	flex item 的自动最小宽度	合理设置 `min-width: 0`
图片超出卡片	替换元素的固有尺寸	`max-width: 100%; height: auto`
父子顶部间距跑到父盒外	垂直 margin 折叠条件	padding、border、BFC 或布局模型

八、表单控件与替换元素还要看使用值

box-sizing 定义尺寸属性落在 content box 还是 border box，但元素最终显示多大还要经过布局算法。图片等替换元素有固有尺寸与宽高比，输入框等表单控件还可能带用户代理默认样式，因此不能只凭作者样式中的一个 width 推断最终像素。

img,
input,
select,
textarea {
  max-width: 100%;
}

这类规则能约束最大宽度，却不等于应该清除所有控件默认边框和 padding。工程中应通过开发者工具读取 computed style 与盒模型面板，确认生效声明、使用尺寸和父布局约束，再决定是否覆盖。

九、常见误区与追问

误区：IE 盒模型只能在 IE 浏览器里使用。 现代浏览器都通过 box-sizing: border-box 支持这种尺寸解释方式，“IE 盒模型”只是历史叫法。
误区：border-box 会把 margin 也计算进 width。 它只把 content、padding 和 border 约束在声明宽度内，margin 始终位于边框盒之外。
误区：全局设置 border-box 就能消除所有横向溢出。 长单词、固有宽度图片、Grid 轨道以及 Flex 自动最小尺寸仍可能造成溢出。
追问：为什么伪元素也常统一设置 box-sizing？ ::before 和 ::after 会生成参与布局的盒，统一模型可以避免装饰元素与组件主体采用不同尺寸口径。
追问：box-sizing 是否继承？ 默认不继承，因此直接选择 * 与伪元素，或采用根元素设置后让所有元素显式继承，才能真正统一。
追问：border-box 下内容宽度可能为负数吗？ 不会，规范会把内容区尺寸下限钳制为零；当 padding 与 border 之和更大时，使用后的边框盒仍可能超过声明宽度。
追问：垂直 margin 为什么有时相加、有时折叠？ 是否折叠取决于块格式化上下文、边界是否相邻、是否存在 border 或 padding 等条件，Flex/Grid 项目间的 margin 不按普通块折叠。

十、加强记忆

盒模型可以记成“内容穿衣服再站队”：内容是身体，padding 是衣服内衬，border 是衣服边缘，margin 是和别人保持距离。面试说区别时抓住一句：content-box 的宽度只算内容，border-box 的宽度算到边框。

简化版

详细版