CSS 盒模型是什么？box-sizing 有什么作用？

详细解析#

盒子的四层#

margin 可以是负值，padding 不行。相邻块级元素的垂直 margin 还会合并，这一点放在 BFC 里讲。

content-box 和 border-box 的宽度计算#

同样一段样式：

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid #333;
  margin: 10px;
}

两种模式下 margin 都不算进 width。border-box 只是把 padding 和 border "收"进去，margin 永远在外面。

为什么项目里常全局设 border-box#

• 尺寸符合直觉：设计稿上一个按钮宽 120px，就写 width: 120px，加 padding 不用再心算减法
• 百分比布局不溢出：两栏各 width: 50% 再加 padding，content-box 下会超过 100% 导致换行，border-box 不会
• 很多 CSS 重置库和 UI 框架都默认这样做

常见写法是让所有元素继承根元素的设置，第三方组件需要 content-box 时可以在局部改回来：

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

行内元素的盒模型#

span、a 这类行内非替换元素也有四层，但表现不同：

• width、height 不生效，尺寸由内容决定
• 水平方向的 padding、border、margin 正常生效，会推开左右的内容
• 垂直方向的 margin 完全不生效；垂直的 padding 和 border 会画出来（背景会变高），但不影响行高，不会把上下行推开，可能和相邻行重叠

想让行内元素的垂直方向尺寸参与布局，改成 display: inline-block。img 这类替换元素，以及 input、button 等表单控件，虽然也是行内级元素，但宽高和垂直 margin 都生效，会把所在的行撑高。

代码示例#

<p style="line-height: 20px">
  第一行文字
  <span style="padding: 10px; margin: 10px; background: #fde68a">行内元素</span>
  第一行文字
  <br />
  第二行文字：上一行 span 的黄色背景会向上下溢出，但这一行的位置没有被推开
</p>

面试官可能追问#

易错点#

• border-box 不包括 margin，margin 在两种模式下都在 width 之外
• 背景默认会画到 border 下面（background-clip 默认值是 border-box），不是只画在 content 区
• 给行内元素设垂直 margin 没效果，设垂直 padding 只是看起来变大，不会撑开行