想象一个快递盒子，快递盒子里面是元素，元素外面用海绵包裹着，海绵是内边距padding（元素离盒子的距离），外面的快递纸箱是边框border（元素的边框），快递盒子与外部的距离是外边距margin，这就是元素与三个框的关系。
padding
- padding：数值；
- padding-方向：数值；(方向是top,right,botton,left)
- 遵循上右下左的顺时针规则
- 背景色可蔓延至内边距
border
border-color
- border-color：颜色；
- border-方向-color：颜色； 对应方向的颜色（top,right,botton,left）
- border-color：A B; 上下为A色，左右为B色
- border-color：A B C；上为A，左右为B，下为C
- border-color：A B C D；遵循上右下左的顺时针规则
border-width
- border-width：thick; 粗 5px
- border-width：middle; 中等 3px（系统默认）
- border-width：thin; 细 1px
- border-方向-width：数值；(方向是top,right,botton,left)
- 遵循上右下左的顺时针规则
- 背景色可蔓延至边框
border-style
- border-style:none; 无样式
- border-style:hidden; 隐藏，显示不了
- border-style:dotted; 点状
- border-style:dashed; 虚线
- border-style:solid; 实线
- border-style:double; 双线
- 遵循上右下左的顺时针规则
margin
- margin：数值；
- margin-方向：数值；(方向是top,right,botton,left)
- 遵循上右下左的顺时针规则
- 元素默认靠右上，因此margin：left；无效果，margin：right；有效果（如果想让left有效果，需添加元素浮动float：right；）
- *{margin：0;padding:0;}可清除网页中所有的内外边距
- margin：0 auto；可设置居中样式（上下为0，左右自动），但是要求1、块元素2、固定宽度
- 背景色不能蔓延至外边距
- 支持负值，可以想象快递盒子叠放在别的盒子上
