浮动布局，定位布局，伸缩盒布局

布局
  默认文档流
    1.元素显示的顺序和代码的顺序是一致的
    2.块级元素独占一行空间，默认宽度为父元素的100%，高度由内容或者子元素决定
    3.行内元素共享一行空间，默认宽高都由内容决定
  浮动布局
    float（如果一个元素添加float属性，那么这个元素就会成为一个浮动元素）
      left  向左浮动
      right  向右浮动
      none  不浮动
      inherit  浮动方式继承父元素
    浮动元素的特点
      1.当一个元素是浮动元素的时候，他会失去对父元素的支撑
    清除浮动
      1.给父元素添加overflow:hidden
      2.使用伪元素

 

定位布局
  position
    static  静态（默认）  非定位元素
    relative  相对定位  定位元素
              相对的是元素原先的值，不脱离文档流(还占据原先位置),宽度默认还是100%，可以覆盖在原先位置上
    absolute  绝对定位  定位元素
              相对的是距离它最近的父定位元素的位置，如果没有父定位元素，那么它相对于浏览器视口
              脱离文档流（不占据原先的位置）
    fixed  固定定位  定位元素
           相对于浏览器视口
           脱离文档流
           不会随着浏览器的滚动而滚动
    sticky  粘滞定位  定位元素
            不脱离文档流
            使用top/right/bottom/left设置一个过渡点，当超过这个过渡点的时候就会体现fixed固定在页面上
    脱离文档流的特点：默认宽度由内容决定，不占据原先的位置（原先的位置被其它元素抢占）
  只有定位元素才可以使用top，right，bottom，left,z-index

  flex布局（伸缩盒布局）
    1.比较：
      传统布局
        兼容性好
        布局繁琐
        局限性，不能在移动端很好的布局
      flex弹性布局（伸缩盒布局）
        操作方便，布局极为简单，移动端应用很广泛
        PC端浏览器支持情况较差
        IE11或更低版本，不支持或部分支持
    2.原理
      任何一个容器都可以指定为flex布局
        采用Flex布局的元素，称为flex容器，他的所有资源股市称为flex项目
        容器默认存在两根轴：水平的主轴和垂直的交叉轴
      当我们为父盒子 设为flex布局后，子元素的float，clear属性即将失效
      给父元素设置display：flex，达到控制子元素的目的
    3.常见父项（容器）属性
      flex-direction：设置主轴的方向
        row（默认）：主轴为水平方向，起点在左端
        row-reverse：主轴为水平方向，起点在右端
        column：主轴为垂直方向，起点在上沿
        column-reverse：主轴为垂直方向，起点在下沿
      justify-content：设置主轴上的子元素排列方式
        flex-start：左对齐
        flex-end：右对齐
        center：居中
        space-between：两端对齐，项目之间的间隔都相等
        space-around：每个项目两侧间隔相等，所以，项目之间间隔比项目与边框的间隔大一倍
      flex-wrap：设置子元素是否换行
        nowrap（默认）：不换行
        wrap：换行，第一行在上方
        wrap-reverse：换行，第一行在下方
      align-content：设置侧轴上的子元素的排列方式（多行）
        flex-start：与交叉轴的起点对齐
        flex-end:与交叉轴的终点对齐
        center：与交叉轴的中点对齐
        space-between：与交叉轴两端对齐，轴线之间平均分布
        space-around：每根轴线两侧的间隔都相等，所以，轴线之间的间隔比轴线与边框的间隔大一倍
        stretch（默认值）
      align-item：设置侧轴上的子元素排列方式（单行）
        flex-start：交叉轴的起点对齐
        flex-end：交叉轴的终点对齐
        center：交叉轴的中点对齐
        baseline：项目的第一行文字的基线对齐
        stretch（默认值）：如果项目没设置高度或设auto，将占满整个容器
      flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap
        flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
    4.项目的属性
      order
        该属性定义了项目的排列顺序，数值越小，排列越靠前，默认0
      flex-grow
        该属性定义了项目的放大比例，默认0，即如果存在剩余空间，也不放大
      flex-shrink
        该属性定义了项目的缩小比例，默认为1，即如果剩余空间不足，该项目将缩小
      flex-basis
        该属性定义了在分配多余空间之前，项目占据的主轴空间
      flex
        flex-grow、flex-shrink、flex-basis的速写形式