四、DIV+CSS标准化布局
（四）、盒子模型
说明：在HTML中的每个元素都是一个以盒子的形状来存在的。
盒子特点：由“内容-元素”+“内填充”+“边框”+“外边距”；在计算盒子大小：100*100+10+1+10
QQ图片20181123051752.png
1、border的属性
| 属性名 | 描述 | 属性值 |
|---|---|---|
| border-top | 上边框 | barder-top:粗细 样式 颜色 border-top:1px dashed red
|
| border-right | 右边框 | border-right:粗细 样式 颜色 |
| border-bottom | 下边框 | border-bottom:粗细 样式 颜色 |
| border-left | 左边框 | border-left:粗细 样式 颜色 |
| border | 四边 | border:粗细 样式 颜色 |
QQ图片20181123064250.png
2、padding属性
| 属性名 | 描述 | 属性值 |
|---|---|---|
| padding-top | 上内填充 | 数值，如：padding-top:10px; |
| padding-right | 右内填充 | 数值 |
| padding-bottom | 下内填充 | 数值 |
| padding-left | 左内填充 | 数值 |
| padding | 简写形式 | padding:10px; //四边都是10； padding:10px 20px; //上下各10，左右各20； padding:10px 20px 30px; //上10，左右各20，下30；padding:10px 20px 30px 40px;按上右下左的顺序。 |
注意：我们的内填充是占背景的。
3、margin属性
| 属性名 | 描述 | 属性值 |
|---|---|---|
| margin-top | 上外边距 | 数值，margin-top:10px; |
| margin-right | 右外边距 | 数值 |
| margin-bottom | 下外边距 | 数值 |
| margin-left | 做外边距 | 数值 |
| margin | 简写形式 | margin:10px; //四边各10；margin:10px 20px; //上下各10，左右各20；margin:10px 20px 30px; //上10，左右各20，下30；margin:10px 20px 30px 40px; //按上右下左的顺序 |
