盒子模型补充

一、内边距(padding)
*padding简写属性：设置四个方向的内边距。
    * padding-top - 上内边距
    * padding-right - 右内边距
    * padding-bottom - 下内边距
    * padding-left - 左内边距
*作用：在实际开发中，可以利用a标签来做按钮的效果。
二、外边距（margin）
*margin简写属性：设置四个方向的外边距，也可以分别设置（同padding）。
*特点：
    - margin-top和margin-left是影响自身的位置（自身移动）。
    - margin-bottom和margin-right是影响相邻元素的位置（相邻元素动）。
*注意：不管是内边距还是外边距都可以设置负值。当外边距设为负值时可能会出现元素覆盖效果，还可能会移出页面。
*外边距重叠（只会出现在垂直方向上，不会出现在水平方向上）：
    当两个div元素，在垂直方向排列，并且为上一个div元素设置下外边距，
    为上一个div元素设置上外边距时，结果会出现重叠现象。
        1 两个边距的值都为正值时：结果是取两个外边距中的最大值。
        2 当一个值为正一个值为负时，结果为两个外边距相加的结果。
*外边距的重叠性：
    对于父子关系的两个元素，如果为子元素设置了上外边距，而父元素没有设置时，他会将此值传递给父元素。
    结果是父子会一起向下移动。（相邻的垂直外边距重叠）
    消除这个现象：
1 为父元素设置上内边距或者上边。
2 为父元素设置 overflow: hidden;    但是存在问题：如果父元素的子元素溢出时会被剪掉。
3 在父子元素之间添加一个空的table,   存在问题：添加了多余的代码
4 父元素设置样式： 
.clearfix:before, .clearfix:after{
content:"";
display:table;
clear:both;
}
                
三、行内元素的盒子模型
*特点：
    对于行内元素来说，边框和内边距都是有效的。
    对于外边距来说，左右（水平方向）是有效的，而上下是无效的。
四、CSS3中关于 box-sizing属性
*属性值：
    - content-box  默认的盒子模型
      实际的宽度 = width + 左右border + 左右padding
      内边距和边框是加在width外面，从而加大了盒子的显示宽度。

      盒子宽度 > width

    - border-box  怪异盒子模型
      实际的宽度 = width
      这种盒子，边框和内边距都是加在width里面。