（1）盒子模型的作用：
布局网页，摆放盒子和内容
（2）盒子模型重要组成部分：
- 内容区域 - width & height
- 内边框 - padding（出现在内容与盒子边缘之间）
- 边框线 - border
- 外边框 - margin（出现在盒子外面）
（3）盒子模型——边框线
属性名：border（bd）
属性值：边框线粗细 线条样式 颜色 （不区分顺序）
常用线条样式：实线-solid 虚线-dashed 点线-dotted
- 设置单方向边框线。
- 属性名：border-方位名词（bd+方位名词首字母(上-top 下-bootom 左-left 右-right)）
- 属性值：边框线粗细 线条样式 颜色 （不区分顺序）
（4）盒子模型——内边距
作用：设置内容与盒子边缘之间的距离。
属性名：padding/padding-方位名词
- padding多值写法：
| 取值个数 | 示例 | 含义 |
| 一个值 | padding:10px | 四个方向内边距均为10px |
| 四个值 | padding:10px 20px 40px 80px | 上:10px 右:20px 下:40px 左:80px |
| 三个值 | padding:10px 40px 80px; | 上:10px 左右:40px 下:80px |
| 两个值 | padding:10px 80px | 上下:10px 左右:80px |
（5）盒子模型——尺寸计算
- 默认情况：盒子尺寸=内容尺寸+border尺寸+内边距尺寸
- 给盒子加border/padding会撑大盒子，margin不会撑大盒子
- 解决：
- 手动做减法：减掉border/padding的尺寸
- 内减模式：box-sizing:border-box
（6）盒子模型——外边距
作用：拉开两个盒子之间的距离，不会撑大盒子
属性名：margin
提示：与padding属性值写法，含义相同。
margin: 0 auto; ==>实现版心居中（前提一定要设置盒子宽度）。