盒模型是CSS布局的基础，主要由三部分组成：边框、内边距、外边距。
边框(border)
1. 四个边的边框
| 属性 | 作用 |
|---|---|
border-width |
边框的宽度 |
border-style |
边框的样式 |
border-color |
边框的颜色 |
例如：
border-width: 1px;
border-style: solid;
border-color: red;
边框可以三个属性简写，格式如下：
border: 宽度 样式 颜色;
例如：
border: 1px solid red;
这一行代码与以上三行完全一致。
2. 单个边的边框
2.1 上边边框
| 属性 | 作用 |
|---|---|
border-top-width |
上边框的宽度 |
border-top-style |
上边框的样式 |
border-top-color |
上边框的颜色 |
例如：
border-top-width: 1px;
border-top-style: solid;
border-top-color: red;
简写格式border-top: 宽度 样式 颜色;
例如：
border-top: 1px solid red;
这一行代码与以上三行完全一致。
2.2 右边边框
| 属性 | 作用 |
|---|---|
border-right-width |
右边框的宽度 |
border-right-style |
右边框的样式 |
border-right-color |
右边框的颜色 |
例如：
border-right-width: 1px;
border-right-style: solid;
border-right-color: red;
简写格式border-right: 宽度 样式 颜色;
例如：
border-right: 1px solid red;
这一行代码与以上三行完全一致。
2.3 下边边框
| 属性 | 作用 |
|---|---|
border-bottom-width |
下边框的宽度 |
border-bottom-style |
下边框的样式 |
border-bottom-color |
下边框的颜色 |
例如：
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: red;
简写格式border-bottom: 宽度 样式 颜色;
例如：
border-bottom: 1px solid red;
这一行代码与以上三行完全一致。
2.4 左边边框
| 属性 | 作用 |
|---|---|
border-left-width |
左边框的宽度 |
border-left-style |
左边框的样式 |
border-left-color |
左边框的颜色 |
例如：
border-left-width: 1px;
border-left-style: solid;
border-left-color: red;
简写格式border-left: 宽度 样式 颜色;
例如：
border-left: 1px solid red;
这一行代码与以上三行完全一致。
3. 四个边的边框简写
下面的三个属性实际上是一个简写，可以用来分别设置四个边框的宽度、样式和颜色。
| 属性 | 作用 |
|---|---|
border-width |
左边框的宽度 |
border-style |
左边框的样式 |
border-color |
左边框的颜色 |
3.1 边框的宽度
一个属性值：上下左右四个边框使用相同的宽度。
例如：border-width:四个边框宽度两个属性值：上下两个边框使用相同的宽度，左右两个边框使用相同的宽度。
例如：border-width:上下边框宽度 左右边框宽度三个属性值：上边框宽度，左右两个边框使用相同的宽度，下边框宽度。
例如：border-width:上边框宽度 左右边框宽度 下边框宽度四个属性值：上左下右四个边框按照顺序使用各不相同的宽度。
例如：border-width:上边框宽度 右边框宽度 下边框宽度 左边框宽度
3.2 边框的风格
一个属性值：上下左右四个边框使用相同的风格。
例如：border-style:四个边框风格两个属性值：上下两个边框使用相同的风格，左右两个边框使用相同的风格。
例如：border-style:上下边框风格 左右边框风格三个属性值：上边框风格，左右两个边框使用相同的风格，下边框风格。
例如：border-style:上边框风格 左右边框风格 下边框风格四个属性值：上左下右四个边框按照顺序使用各不相同的风格。
例如：border-style:上边框风格 右边框风格 下边框风格 左边框风格
3.3 边框的颜色
一个属性值：上下左右四个边框使用相同的颜色。
例如：border-color:四个边框颜色两个属性值：上下两个边框使用相同的颜色，左右两个边框使用相同的颜色。
例如：border-color:上下边框颜色 左右边框颜色三个属性值：上边框颜色，左右两个边框使用相同的颜色，下边框颜色。
例如：border-color:上边框颜色 左右边框颜色 下边框颜色四个属性值：上左下右四个边框按照顺序使用各不相同的颜色。
例如：border-color:上边框颜色 右边框颜色 下边框颜色 左边框颜色
内边距(padding)
内边距是元素边框与元素内容之间的空白区域，与表格cellpadding相似
| 属性 | 作用 |
|---|---|
padding-bottom |
元素的下内边距 |
padding-left |
元素的左内边距 |
padding-right |
元素的右内边距 |
padding-top |
元素的上内边距 |
以上可以使用简写
padding: 上内边距 右内边距 下内边距 左内边距;
padding: 上内边距 左右内边距 下内边距;
padding: 上下内边距 左右内边距;
padding: 上下左右内边距;
外边距(margin)
外边距是元素边框外的空白区域。
| 属性 | 作用 |
|---|---|
margin-bottom |
元素的下外边距 |
margin-left |
元素的左外边距 |
margin-right |
元素的右外边距 |
margin-top |
元素的上外边距 |
以上可以使用简写
margin: 上外边距 右外边距 下外边距 左外边距;
margin: 上外边距 左右外边距 下外边距;
margin: 上下外边距 左右外边距;
margin: 上下左右外边距;
