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

盒子模型的组成

       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值所以怎么设置的数值就怎么显示