盒子模型结构

一、概念
网页中所有 HTML 元素都可以看作一个矩形盒子，盒子模型规定了盒子的尺寸、边距、边框的计算规则，是页面布局的底层核心基础。
盒子由四层结构从内到外依次为：内容区 content → 内边距 padding → 边框 border → 外边距 margin。
二、四层结构详解（由内向外）

1. content 内容区（核心）
   存放文字、图片、子元素的区域，通过 width、height 直接设置大小。
   作用：承载页面实际内容
   示例：width: 200px; height: 100px; 仅代表内容区域尺寸
2. padding 内边距
   内容与边框之间的空白距离，属于盒子内部区域，会增加盒子整体可视大小，背景色会延伸到 padding 区域。
   写法：
   css
   padding: 10px; /* 上下左右全部10px /
   padding: 10px 20px; / 上下10，左右20 /
   padding: 5px 10px 15px 20px; / 上 右 下 左 顺时针 /
   padding-left: 15px; / 单独左侧内边距 */
3. border 边框
   包裹 padding 的线条，有粗细、样式、颜色三个属性，同样会增大盒子尺寸。
   css
   border: 2px solid #333; /* 粗细 线型 颜色 /
   border-radius: 8px; / 圆角边框 */
4. margin 外边距
   盒子与其他盒子之间的外部间距，不属于盒子本身，不会撑开盒子大小，仅控制盒子之间的距离，背景不会覆盖 margin 区域。
   css
   margin: 0 auto; /* 块级盒子水平居中 /
   margin-top: 20px; / 单独设置上方外边距 */
   三、两种盒子模型（核心区分）
5. 标准盒子模型（默认 box-sizing: content-box）
   盒子实际占用宽度公式：
   总宽度 = width(content) + padding左右 + border左右 + margin左右
   width 只代表内容宽度，padding、border 会额外扩大盒子。
6. 怪异盒模型（IE 盒模型，box-sizing: border-box）
   日常开发推荐使用，公式：
   总宽度 = width = content + padding + border
   设置的 width 是盒子整体可视宽度，padding、border 向内压缩内容，不会撑大盒子。
   全局通用初始化写法：
   css

• {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }
  四、关键特性补充
  1.margin 塌陷（外边距合并）
  ·垂直方向上下两个块级盒子，margin-top 和 margin-bottom 会合并，取两者最大值；
  ·父盒子和第一个子盒子，若无 padding/border 分隔，子盒子 margin-top 会传递给父盒子。
  解决：给父盒子加 border / padding / overflow: hidden。
  2.margin 无背景
  padding、content、border 会继承盒子背景色，margin 永远透明。
  3.行内元素特点
  行内元素（span、a）上下 margin/padding 不占空间，左右有效；设置宽高不生效，需转为 block/inline-block。
  五、可视化层级速记
  plaintext
  [margin(透明间距)]
  ┌─────────────────────┐
  │ [border 边框线条] │
  │ ┌───────────────┐ │
  │ │ padding(内留白)│ │
  │ │ ┌─────────┐ │ │
  │ │ │ content │ │ │
  │ │ └─────────┘ │ │
  │ └───────────────┘ │
  └─────────────────────┘

[margin(透明间距)]
┌─────────────────────┐
│ [border 边框线条] │
│ ┌───────────────┐ │
│ │ padding(内留白)│ │
│ │ ┌─────────┐ │ │
│ │ │ content │ │ │
│ │ └─────────┘ │ │
│ └───────────────┘ │
└─────────────────────┘