CSS盒模型剖析
盒模型定义了元素内容、内边距（padding），边框（border），外边距（margin）的方式
元素内容：元素所包含的子元素或是文本节点所产生的宽高
内边距（padding）：介于边框和内容区之间的区域，直接的效果是增加了元素自身的宽高，使整个元素“膨胀”起来，属性值为上右下左四 个方向值（padding:20px;），接收单方向值设定（padding-left:20px;）。可以设定为固定值或百分数，但不接受负值。
边框（border）：围绕元素和padding值的一条线，增加了元素本身的宽高（取决于border的粗细）,border可以设定线条样式（实线solid、 虚线dashed、点线dotted等），线条颜色（#000、rgba(0,0,0)、black等），线条粗细（1px、Npx）。和padding相同，属性值为上右下左四 个方向值(border:1px solid green)，接收单方向值设定。如：border-right:1px solid green
外边距（margin）：本元素距离外界的距离，会在元素外（包含padding，border）创建额外的空白。和padding，border相同，属性值为上 右下左四个方向值，接收单方向值设定。同时接收负数值的设定如：margin-left:-20px;用于解决浏览器兼容性或特殊处理使用。同时接收 auto（margin：0 auto;）,margin的上下值对内联元素不生效。
margin值的注意事项：
①当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距取两者之间较大的一个。而不是两个值相加。