CSS 盒模型：内容、内边距与边框

页面上每个元素都可以看成一个盒子：内容区、内边距（padding）、边框（border）、外边距（margin）。布局问题十有八九出在盒模型。

两种计算方式

默认 content-box：你写的 width 只约束内容区，padding 和 border 会把盒子撑大。

推荐全局使用 border-box：

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

这样 width: 300px 包含 padding 与 border，排版更直观。

常见误区

• 给 100% 宽的元素再加左右 padding，在 content-box 下会溢出父容器。
• 垂直方向相邻 margin 会合并，不是简单相加。
• 行内元素的上下 margin 表现与块级不同。