盒子模型及布局和外边距重叠问题

  盒子模型的组成
           1.content （内容）元素存放内容的区域
           2.padding：（内边距）设置元素内容与边框之间的距离
           3.border：（边框） 设置元素边框
           4.margin：（外边距） 外边距设置元素与元素之间的距离
           
 盒子模型的分类
    大概常见的两种：
      分类：
         1.w3c标准盒子模型（标准盒子）；水平方向；border-left/right +padding-left/right+width
         垂直方向：border-top/bottom +padding-top/bottom+height
         2.IE标准盒子模型（怪异盒子）水平方向width=border-left/right +padding-left/right+content（内容）
         3.设置盒子阴影
        border-shadow：x y blur      blur：代表模糊程度只有正值越大越模糊，单位px；
 盒子模型中关于外边距重叠问题
 父元素子元素边距重叠问题
    产生原因：垂直方向；父子元素外边距重叠，所以给子元素设置的外边距会传递给父元素。
    解决办法：1.给父元素设置一个边框(原理给父元素设置边框把内容与外边距隔开了)
            方法2.设置内边距 （1，2都会出现将父元素扩大，解决：添加属性box-sizing：border—box 设置为边框盒）
            方法3.设置overflow的值非visible，常用hidden
            方法4.给父元素通过::before 添加一个table元素，必须要写content属性
            方法5.最好用，设置一个clearfix使用伪元素选择器进行设置在他之前添加一个table
            
## 父子布局
 父子元素水平布局
        父元内容盒的水平宽度-margin-left++border-left+padding-left+width+margn-right+border-right+padding-right
        子元素水平方向的属性值的和<父元素的内容盒的宽度
        1.所有属性都是确定值，多余的部分给margin-right吸收
        2.有一个属性值设置为auto值时 多余的部分给设置值为auto属性的吸收掉
        3.有两个属性值设置为auto：
        margin-left、margin-right：多余部分二者平分，常实现效果；块元素在包含块（父元素）中水平居中
        width/margin-left/margin-right：如果width和后面任意一个同时为auto属性时，优先把多余部分分配给width
        4.有三个属性设置为auto;多余部分全部给width吸收
    
       5. 父子元素垂直方向：margin-top、margin-bottom、height都没有auto值所以怎么设置的数值就怎么显示