1.什么是框？
页面元素皆为框
2.什么是框模型？
Box Model，定义了元素框处理元素的内容，内边距，外边距以及边框的 一种计算方式
当框模型介入到元素后，元素的占地尺寸会发生变化:
元素的宽度 = 左右外边距+左右边框+左右内边距+w; （所有的左右内外边距+左右边框高度）
元素的高度 = 上下外边距+上下边框+上下内边距+h （所有的上下内外边距+上下边框高度）
内边距与外边距如图所示
外边距：
元素与元素之间的距离
围绕在元素边框周围的空白距离，就是外边距
| margin | 定义某元素四个方向的外边距 |
| margin-top/right/bottom/left | 定义某元素单个方向的外边距 |
| ex：margin-left | 取值为正，让元素右移动 取值为负，让元素左移动 |
| ex：margin-top | 取值为正，让元素下移动 取值为负，让元素上移动 |
| 以PX为单位的数字 |
| 取值为auto：自动计算外边距的值，只针对左右外边距，只针对块级元素有用 |
| 取值为 %：外边距的值，占父元素宽或高的占比是多少 |
| margin:value; | 四个方向的外边距都相同 |
| margin:v1 v2; | v1 : 上下外边距 v2 : 左右外边距 |
| margin:v1 v2 v3; | v1 : 上外边距 v2 : 左右外边距 v3 : 下外边距 |
| margin:v1 v2 v3 v4; | 依次执行上 右 下 左外边距 |
| maring:0px auto; | 上下为0，只设置左右 |
| h1~h6,p,ul,ol,dl,dd,pre,body |
外边距的合并
当两个垂直外边距相遇时，他们将合并成一个，最终的距离取决于两个外边距中距离较大的那个
外边距的溢出
在某些特殊的条件下，为子元素设置上外边距时，有可能会作用到父元素上
特殊条件如下
1、父元素没有上边框
2、为第一个子元素设置上外边距时
例子展示
解决方案：打破特殊条件的任何一个就可以解决（用解决方案3就行，其他的直接略过）
1、为父元素增加上边框
弊端：对父元素的高度有影响
2、使用父元素的上内边距来取代子元素的上外边距
弊端：对父元素的高度有影响
3、在父元素的第一个子元素位置处，增加一个空 <table></table>
注意： 行内元素 以及 行内块元素的垂直外边距
1、行内元素垂直外边距无效(img除外)
2、行内块元素，设置垂直外边距时，整行元素都跟着发生改变
内边距：有了内边框会改变占地区域
元素边框与内容之间的距离，内边距会扩大元素边框占地区域
| padding:value |
| padding-top / right / bottom / left:value; |
| 以px为单位的数值 |
| 以 %为单位的数值 |
| padding:value | 四个方向内边距值 |
| padding:v1 v2; | v1 : 上下 v2 : 左右 |
| padding:v1 v2 v3; | v1 : 上 v2 : 左右 v3 : 下 |
| padding:v1 v2 v3 v4; | 上 右 下 左 |
效果展示：
d1占地区域为200+20+2
d2占地区域为200+2
重点： 上图发现：d1,d2的占地区域发生了改变
添加box-sizing:border-box;d1和d3的占地区域为原来的值
属性：box-sizing —指定框模型的计算方式
| content-box | 默认值，采用默认的方式计算元素的占地区域 实际占地宽度=左右边框+左右内边距+width; 实际占地高度=上下边框+上下内边距+height |
| border-box | 元素的尺寸，会包含border以及padding的值 实际占地宽度=width(包含了border和padding) 实际占地高度=height(包含了border和padding) |