盒子模型及布局

 内容盒：content-box 元素放内容的区域

        边框盒：border-box   border+padding+content

        box-sizing：设置盒子尺寸——>设置width/height设置作用对象

        默认时width/height是值元素内容盒的宽高  

分类：

          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

             垂直方向：height=border-top/bottom+padding-top/bottom+content

 设置盒子阴影

        box-shadow: x y blur color;

盒子模型的组成：从内向外

           1.content（内容） 元素放内容的区域

           2.padding（内边距） 设置元素内容与边框之间的距离

           3.border（边框） 设置元素边框

           4.margin（外边距） 设置元素之间的距离

兄弟元素：

         块元素:

            二个正值：取值大的

            一负一正：相加

            二负：重合位置取绝对值较大

         行元素：

            二个正值：相加

            一负一正：相加

            二负：重合部分的大小是二个值相加的绝对值

        注：行元素垂直方向的外边距没有效果