三种布局：float、position与flex

浮动布局 （float）

   1.关于默认文档流
        1）元素在页面中的显示顺序与元素在代码中出现的顺序是一致的。    
        2）块级元素独占一行空间，宽度默认为父级的100%，高度由其内容高度所决定。
        3）行内元素与其他元素共享一行空间，宽高由其内容所决定。

    浮动布局（如果一个元素添加float属性。那么这个元素就会成为一个浮动元素）
      float
        left      向左浮动
        right     向右fudong
        none      不浮动
        inherit   浮动方式继承父元素

      浮动元素的特点
        1.当一个元素是浮动元素的时候，他会失去对父元素的支撑。浮动元素脱离了普通流，会出现一种高度坍塌的现象
        2.浮动后的元素可以设置宽度和高度,行内元素变成了inline-block
        3.浮动元素脱离了普通流，会出现一种高度坍塌的现象

      清除浮动
        1.给父元素添加 overflow:hidden;
        2.使用伪元素  box1::after{ content:'';
                                   display:both;
                                   clear:both;     }     伪元素
                       clear:both;  清除浮动元素对当前元素的影响

定位布局  position（轮播图：原点，箭头。。。）

  static     静态（默认）   非定位元素

  relative   相对定位       定位元素
                1）相对的是元素原先的位置
                2）不设置偏移量，元素不会发生任何变化
                3）不脱离文档流（还是占据原先的位置），宽度默认100%
                4）不会改变元素的性质
                5）覆盖在其他元素上（z-index），相对定位会提升元素的层级

  absolute   绝对定位       定位元素
                1）相对的是距离它最近的开起定位的祖先元素的位置，如果没有祖先定位元素，（相对于根元素）
                2）不设置偏移量，元素的位置不会发生变化
                3）脱离文档流（不占据原先的位置）
                4）绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开
                5）绝对定位会提升元素的层级

  fixed      固定定位       定位元素（也是一种绝对定位，大部分特点和绝对定位一样）
                1）相对于浏览器的视口
                2）脱离文档流
                3）不会随着浏览器滚动而滚动

  sticky     粘滞定位       定位元素（与相对定位特点一致）
                1）使用top、right、bottom、left设置一个过渡点，当超过这个过度点的时候，就会体现fixed固定在页面上
                2）不脱离文档流，仍然保留元素原本在文档流中的位置

定位元素可以使用 偏移量（offset）： top、right、bottom、left、z-index（z-index 取值无需指定单位，值大的显示在上方）
脱离文档流的特点：默认宽度由内容决定，不占据原先的位置（原先的位置被其他元素抢占）
z-index：
          1）z-index 取值无需指定单位，值大的显示在上方
          2）如果元素的层级一样，则优先显示靠下的元素
          3）祖先的元素层级再高也不会盖住后代元素

flex布局 伸缩盒布局
  传统布局：兼容性好，布局繁琐，有局限性不能在移动端很好的布局
  flex布局：
        1.操作方便，布局简单，移动端用用广泛
        2.PC端浏览器支持较差
        3.IE11或更低版本，不支持或者部分支持

2.原理
  任何容器都可以指定为flex布局
    采用flex布局的元素，称为flex元素，所有的子元素称为flex项目
    容器默认两根轴：水平的主轴和垂直的交叉轴
  父盒子设置为flex布局后，子元素的float、clear都会失效
   display:flex;

3.常见父项属性
    1）flex-direction    设置主轴的方向
            row              默认，主轴水平方向，起点在左端
            row-reverse      主轴水平方向，起点在右端
            column           主轴垂直方向，起点在上沿
            column-reverse    主轴垂直方向，起点在下沿

    2）flex-wrap         设置子元素是否换行
            nowrap         （默认）   不换行（会等比例的缩放）
            wrap            换行，第一行在上方
            wrap-reverse    换行，第一行在下方

          flex-direction: row;              
          flex-wrap: wrap;              
            =》              
       6）flex-flow: row wrap;

    3）justify-content  主轴上子元素的排列方式
            flex-start        【默认值】在主轴的开始显示                
            flex-end         在主轴的结束显示                
            center             在主轴的中心显示                
            space-around    空白分配到元素的两侧，填充空白自适应在主轴中心显示
            space-evenly    空白分配到元素的单侧            
            space-between   填充空白自适应在主轴中心显示，但是首尾两个元素距离容器没有空白
    
    4）align-content     多轴排列在交叉轴对齐方式（多行）
            取值： （对齐元素之间的空白）
            flex-start:与交叉轴的起点对齐
            flex-end：与交叉轴的终点对齐
            center：与交叉轴的中点对齐
            space-between：与交叉轴两端对齐，轴线之间平均分布
            space-around：每根轴线两侧的间隔都相等，所以，轴线之间的间隔比轴线与边框的间     隔大一倍
            stretch（默认值)

    5）align-items        控制伸缩盒子在交叉轴的对齐方式（单行）        
            取值：  （元素间的关系）
            flex-start        在伸缩盒子容器的伸缩开始位置显示，即伸缩盒子容器顶部    
            flex-end       在伸缩盒子容器的伸缩结束位置显示，即伸缩盒子容器底部    
            stretch           【默认值】将盒子在交叉轴上进行拉伸，直至适应整个伸缩盒子容器
            center           盒子在交叉轴中心显示
            baseline       和项目第一行文字的基线对齐

  4.项目的属性
        order
            该属性定义了项目的排列顺序，数值越小，排列越靠前，默认0

        flex-grow
            该属性定义了项目的放大比例，默认0，即如果存在剩余空间，也不放大

        flex-shrink
            该属性定义了项目的缩小比例，默认为1，即如果剩余空间不足，该项目将缩小

        flex-basis
            该属性定义了在分配多余空间之前，项目占据的主轴空间

        flex
            flex-grow、flex-shrink、flex-basis的速写形式

4.display：flex和display: inline-flex的使用效果区别
    display:flex;   /*父div设置该属性此时没有为父元素设置宽度，默认为100%*/
    display:inline-flex    /*没有为父元素设置宽度，但是父元素默认会根据子元素的宽高去自适应*/

5.align-self与align-items
    align-items是一个弹性容器，而align-self则是一个弹性项目，
    可以简单理解为，align-items是控制容器内的元素布局，而align-self则是控制自身的。
    如果在Flex容器中有多个Flex项目时，该方法同样有效

6.    .flex__container {
          place-content: center;
          place-items: center;
      }

      等效于：

      .flex__container {
          align-content: center;
          justify-content: center;

          align-items: center;
          justify-items: center;
      }

7.在Flex项目上设置margin: auto
    如果在Flex容器中只有一个Flex项目，还可以显式在Flex项目中显式设置 margin 的值为auto，这样也可以让Flex项目在Flex容器中水平垂直居中。