盒子模型
页面中所有元素都可以看做是一个盒子，包含“内容”、“边框”、“内边距”和“外边距”四部分。
内容区
主要有三个属性：
- width
- height
- overflow
当 content 中的信息太多，超出内容区所占范围时，可通过 overflow 属性来指定溢出内容的处理方式。
| 取值 | 描述 |
| visible | 默认值，溢出内容不会被裁剪，会呈现在元素框外。 |
| hidden | 溢出内容将不可见。 |
| scroll | 溢出内容会被裁减，但可通过滚动条查看隐藏部分。 |
| auto | 由浏览器决定如何处理溢出部分。 |
边框
| 取值 | 描述 |
| border-top : 1px solid #6699cc |
上框线 |
| border-bottom : 1px solid #6699cc |
下框线 |
| border-left : 1px solid #6699cc |
左框线 |
| border-right : 1px solid #6699cc | 右框线 |
| 以上是建议书写方式,但也可以使用常规的方式 如下: | |
| border-top-color : #369 | 设置上框线top颜色 |
| border-top-width :1px | 设置上框线top宽度 |
| border-top-style : solid | 设置上框线top样式 |
| 统一设置边框样式 | |
| border-color : #369 | 设置框线颜色 |
| border-width :1px（上下左右） border-width :1px 2px（上下 左右） border-width :1px 2px 3px（上 左右 下） border-width :1px 2px 3px 4px（上 右 下 左） |
设置框线宽度 |
| border-style : solid | 设置框线样式 |
其中，边框样式有如下选择：
| 取值 | 描述 |
| solid |
实线框 |
| dotted |
虚线框 |
| double |
双线框 |
| groove | 立体内凸框 |
| ridge | 立体浮雕框 |
| inset | 凹框 |
| outset | 凸框 |