1，框模型概述
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素
内边距、边框和外边距都是可选的，默认值是，width 和 height 是内容区域的宽度和高度
padding : 内边距，填充。
border : 边框
margin : 外边距，空白或空白边
2 内边距
padding 属性定义元素的内边距，接受长度值（px，em，cm）或百分比值（%），但不允许使用负值
div {
border: 1px solid #576abc;
padding: 10px 2cm 2em 10%
}
运行效果：
单边内边距属性
padding-top /*上边距*/
padding-right /*右边距*/
padding-bottom /*底边距*/
padding-left /*左边距*/
3 边框
元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。 border 属性允许你规定元素边框的样式、宽度和颜色
div { border: 2px solid #576abc }
/*div {
border-width: 2px;
border-style: solid;
border-color: #576abc
}*/
运行效果：
上右底左可分别设置不同 宽（width），样式（style），颜色（color）
div {
border-top: 2px solid red;
border-right: 2px double yellow;
border-bottom: 2px dotted #455acc;
border-left: 2px double #afc465
}
运行效果：
3-1，单边样式
border-top-style
border-right-style
border-bottom-style
border-left-style
因为 border-style 的默认值是 none，所以，如果希望边框出现，就必须声明一个边框样式。
border-style 属性定义了 9 个不同的非 inherit 样式：包括 none（没有的）
dotted （有点的） dashed （虚线）solid （固体的）double （双重的）
3D： groove （沟槽）ridge （隆起线）inset 嵌入（内凹）outset 突出（外凸）
3-2，单边宽度
border-top-width
border-right-width
border-bottom-width
border-left-width
为边框指定宽度有两种方法：可以指定长度值；或者使用 3 个关键字之一，分别是 thin【薄的】 、medium（默认值）【适中】 和 thick【粗的】。
3-3，单边颜色
border-top-color
border-right-color
border-bottom-color
border-left-color
有宽度的不可见边框，边框颜色值 transparent。默认颜色为黑色
4 外边距
围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位（像素、英寸、毫米或 em）、百分数值甚至负值。
div {
border: 2px solid red;
padding: 0px
}
p {
border:1px solid yellow;
margin: 5px 20px
}
单边外边距：
margin-top
margin-right
margin-bottom
margin-left
如果外边距指定了 3 个值，则第 4 个值（即左外边距）会从第 2 个值（右外边距）复制得到。如果给定了两个值，第 4 个值会从第 2 个值复制得到，第 3 个值（下外边距）会从第 1 个值（上外边距）复制得到。最后一个情况，如果只给定一个值，那么其他 3 个外边距都由这个值（上外边距）复制得到
5 外边距合并
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
div {
border: 2px solid red;
padding: 0px;
}
h1 {
border:1px solid yellow;
margin: 30px
}
p {
border:1px solid yellow;
margin: 5px 20px
}
运行效果：
h1的底外边距和p的上外边距进行了合并margin-top为30px，其他外边距不发生变化
一个空元素，它有外边距，但是没有边框或填充。，上外边距与下外边距就碰到了一起，它们会发生合并
h1 {
border:1px solid yellow;
margin: 30px
}
运行效果：
只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
