1.盒模型

   1.1：盒模型分为4个组成部分：margin（外边距）,border(边框)，padding(内边距),content(内容)

 1.2：其中盒模型又分为标准盒模型与IE盒模型，它们的区别具体如下

　　标准盒模型的内容区content不包含padding和border，而ie盒模型的content区域包含padding和border

　　使用ie盒模型的语法：box-sizing:border-box,

　　( 当它定义width和height时，border和padding则是被包含在宽高之内的。内容的宽和高可以通过定义的“width”和 “height”减去相应方向的“padding”和“border”的宽度得到。内容           的宽和高必须保证不能为负，必要时将自动增大该元素border box的尺寸以使其内容的宽或高最小为0。)

　　使用标准盒模型：box-sizing:content-box,

　　其实说简单一点就是改变盒模型内容区块大小的计算方式。

1.3：关于外边距折叠的问题

      1.3.1：兄弟元素折叠

   参加折叠的margin都是正值：取其中 margin 较大的值为最终 margin 值。

   如果都为负值，取最小。

   如果值为一正一负，两个值相加

    1.3.2:父子级折叠

   如果一个块级元素的margin-bottom与最后一个子元素的margin-bottom之间没有border,padding等来进行分割，则会导致外边距塌陷，子元素多余的外边距会被父元素的外边距截         断，也就是说此时子元素的外边距不是作用于父元素，而是作用于父元素之外的对象

   1.3.3折叠产生的解决方式

   在父元素上添加overflow-hidden，即创建一个BFC区域。

   设置父元素或子元素浮动（不推荐）。

   给父元素设置绝对定位。

   给父元素设置样式：display:inline-block。

2.定位

  2.1   定位分为静态定位（默认值）static，相对定位 relative,绝对定位absolute以及固定定位fixed。

  2.2    静态定位static:任何不做定位操作的都为此类

           相对定位relative:相对定位元素不能相互层叠，发生偏移之后原来占的位置依旧保留，可以使用z-index来指定分层。

           绝对定位obsolute:可以脱离文档流，其位置偏离至相对于自身最近且设置了相对定位的父级上，如果父级上没有做定位处理，则会以body元素作为偏移对象，同样可以使用                 z-index来调整层叠位置，值越大的在最上面，反之在最底层。

          固定定位fixed：类似于绝对定位，但是它是相对于浏览器窗口定位，不会受滚动条影响，一般用于导航，广告等

3.弹性盒模型

  3.1 常用属性

        flex-direction:弹性容器中子元素的排列方式。取值：row,row-reverse,column,column-reverse

        flex-wrap:子元素超出部分是否换行。取值：wrap,wrap-reverse,,nowrap

        flex-wrap:wrap;

        flex-wrap:wrap-reverse;

        flex-flow:flex-direction和flex-wrap的缩写方式

        align-items：设置弹性盒子元素在交叉轴上的对其方式。取值stretch,center,flex-start,flex-end,base-line

　　align-content:设置多条轴线的对其方式 。

　　justify-content:设置主轴上的对其方式。  取值：flex-start,flex-end,center,space-between,

       space-evenly,space-around

 3.2 弹性盒子模型子元素属性

    order：设置子元素的排列顺序

    flex-grow:设置子元素按比例放大。默认值为0

    flex-shrink:设置子元素按比例缩小。默认值为1

    flex：设置子元素如何分配空间。

　align-self：子元素上使用，覆盖容器的align-items属性。取值：flex-start,flex-end,baseline,initial,inherit

　例如：align-self:flex-end如下：