认识盒子模型
盒子模型包括四个要素：外边距（margin）、边框（border）、内边距（padding）、内容（content）。
- 网页就是多个盒子嵌套排列的结果
- 内边距出现在内容区域的周围，当给元素添加背景色或背景图像时，该元素的背景色或背景图像也将出现在内边距中
- 外边距是该元素与相邻元素之间的距离
- 如果给元素定义边框属性，边框将出现在内边距和外边距之间
- 需要注意的是，虽然盒子模型拥有内边距、边框、外边距、宽和高这些基本属性，但是并不要求每个元素都必须定义这些属性
相关属性
边框属性
设置边框样式（border-style）
- none：无边框（默认值）
- solid：单实线边框
- dashed：虚线边框
- dotted：点线边框
- double：双实线边框
| 属性 | 描述 |
|---|---|
| border-style | 简写属性，同时设置边框4个方向的样式 |
| border-top-style | 设置上边框的样式 |
| boder-right-style | 设置右边框的样式 |
| border-bottom-style | 设置下边框的样式 |
| border-left-style | 设置左边框的样式 |
- 注意边框风格属性取4个值时，按顺时针方向依次设置上、右、下、左边框的风格
设置边框宽度（border-width）
| 属性 | 描述 |
|---|---|
| border-width | 简写属性，同时设置边框4个方向的宽度 |
| border-top-width | 设置上边框的宽度 |
| border-right-width | 设置右边框的宽度 |
| border-bottom-width | 设置下边框的宽度 |
| border-left-width | 设置左边框的宽度 |
| 宽度值 | 描述 |
| – | – |
| length | 数值px或em |
| thin | 细边框 |
| medium | 中等边框（默认值） |
| thick | 粗边框 |
设置边框颜色（border-color）
| 属性 | 描述 |
|---|---|
| border-color | 简写属性，同时设置边框4个方向的颜色 |
| border-top-color | 设置上边框的颜色 |
| boder-right-color | 设置右边框的颜色 |
| border-bottom-color | 设置下边框的颜色 |
| border-left-color | 设置左边框的颜色 |
综合设置边框
| 属性 | 描述 |
|---|---|
| border | 四边宽度、样式、颜色 |
| border-top | 上边框宽度、样式、颜色 |
| borde-right | 右边框宽度、样式、颜色 |
| border-bottom | 下边框宽度、样式、颜色 |
| border-left | 左边框宽度、样式、颜色 |
内边距属性
| 属性 | 描述 |
|---|---|
| padding-top | 上内边距 |
| padding-right | 右内边距 |
| paddin-bottom | 下内边距 |
| padding-left | 左内边距 |
| padding | 上右下左内边距 |
外边距属性
| 属性 | 描述 |
|---|---|
| margin-top | 上外边距 |
| margin-right | 右外边距 |
| margin-bottom | 下外边距 |
| margin-left | 右外边距 |
背景属性
设置背景颜色（background-color）
设置背景图像（background-image）
设置背景图像平铺（background-repeat）
-
repeat：水平竖直平铺（默认）
-
no-repeat：不平铺
-
repeat-x：水平平铺
-
repeat-y：竖直平铺
设置背景图像的位置（background-position） -
水平方向值：left、center、right
-
竖直方向值：top、center、bottom
-
像素：20px 20px
-
使用百分比
设置背景图像固定（background-attachment） -
scroll：图像随页面元素一起滚动（默认）
-
fixed：图像固定在屏幕上，不随页面元素滚动
综合设置元素的背景（background）
background：背景色 url（“图像”） 平铺 定位 固定
盒子的宽与高
- 盒子的总宽度=width+左右内边距之和+左右边框宽度之和+左右外边距之和
- 盒子的总高度=height+上下内边距之和+上下边框宽度之和+上下外边距之和
- 宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（< img />标记和< input />标记除外）
- 计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况
