一、盒子模型解决什么问题
- 控制盒子内容大小、内边距、边框、外边距
- 区分：元素本身占多大空间、它和别的盒子之间留多大空隙
- 解决尺寸计算混乱的痛点（标准盒 / IE 怪异盒两种计算规则）
- 实现元素之间拉开距离、加边框、背景留白、模块排版
盒子四层结构（从里往外）：
content：内容区域，放文字、图片、子盒子padding：内边距 → 内容和边框之间的距离（在盒子内部，背景会延伸到 padding）border：边框线margin：外边距 → 当前盒子和别的盒子之间的距离（盒子外面，透明，不会带背景）
margin（外边距，外面空白） border（边框） padding（内边距，内部留白） content（内容）二、两种盒子模型（重点！box-sizing）
1. 标准盒模型（默认：box-sizing: content-box）
✅ 宽度计算公式：盒子实际宽度 = width (内容宽) + padding 左右 + border 左右
你设置 width，只是内容区的宽；padding 和边框会把盒子撑大！
.box{ width:200px; padding:10px; border:2px solid #000; box-sizing: content-box; } /* 真实宽 = 200 + 10*2 + 2*2 = 224px */2. IE 盒模型 / 怪异盒模型（推荐写：box-sizing: border-box）
✅ 宽度计算公式：盒子实际宽度 = width（包含 content + padding + border）
设置的 width 就是你肉眼看到盒子总宽，padding、边框向内挤压内容，不会撑大盒子！
.box{ width:200px; padding:10px; border:2px solid #000; box-sizing: border-box; } /* 盒子整体宽严格就是200px，不用自己算加法 */👉 开发几乎全部用 border-box，布局不容易乱！一般全局直接统一设置：
* { margin: 0; padding: 0; box-sizing: border-box; }三、四个属性怎么使用（单位统一 px）
1. padding 内边距（内容 ↔ 边框）
写法（上 右 下 左，顺时针）
padding: 10px; /* 四个方向都是10px */ padding: 10px 20px; /* 上下10px，左右20px */ padding: 10px 20px 5px;/* 上10，左右20，下5 */ padding:10px 20px 30px 40px; /* 上、右、下、左 */ /* 单独写某一边 */ padding-top: 10px; padding-left: 15px;⚠️ 行内元素（span）上下 padding 不会推开上下元素，左右正常生效。
2. border 边框
/* 粗细 样式 颜色 */ border: 2px solid #333; /* 单边边框 */ border-bottom:1px solid #ccc;3. margin 外边距（盒子和隔壁盒子的距离）
写法和 padding 一模一样
margin: 20px auto; /* auto 专门用来水平居中块级盒子！前提：有width */⚠️ margin 经典坑：垂直 margin 塌陷（合并）两个上下挨着的块盒子，上面 margin-bottom:20px，下面 margin-top:20px，最终空隙不是 40px，而是取大的 20px。 水平 margin 不会塌陷。
四、适用场景
- 页面初始化重置：清除浏览器自带默认 margin、padding（* 选择器重置）
- 模块内部留白：卡片、按钮里面文字离边框远一点 → 用 padding
- 模块之间拉开间距：两个卡片、两个 div 之间留白 → 用 margin
- 给元素加边框、分割线：border
- 固定尺寸组件（按钮、输入框、卡片）：
border-box，改 padding 不撑大盒子 - 块级盒子水平居中：
margin: 0 auto;
