html的一些布局：浮动布局，定位布局，伸缩盒布局

1.为什么要布局？

 使页面美观  

 默认排列方式不满足需求
      默认文档流
        元素在页面中的显示顺序与在代码中出现的顺序是一致的。
        块级元素独占一行空间，宽度默认为父级的100%，高度由其内容或子元素所决定。
        行内元素共享一行空间，宽高默认由其内容所决定。

2.浮动布局float

   float（如果一个元素添加float属性，那么这个元素就成一个浮动元素）
         
    取值：

           left      向左浮动
           right     右
           inherit   继承父元素
           none      不浮动

     浮动元素的特点：
               当一个元素是一个浮动元素的时候会失去对父元素的支撑
               脱离文档流
               清除浮动：
                 给父元素添加overflow：hidden
                            clear：both；
                 使用伪元素

 3.定位布局position

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

     relative   相对定位        定位元素（只有定位元素可以使用top、right、bottom、left、z-index）
                   相对的是元素原先的位置
                   不脱离文档
                   宽度默认100%
                   可以覆盖在其他元素上

     absolute   绝对定位        定位元素
                      相对的是距离它最近的父定位元素的位置

                      如果没有父定位元素，那么它相对于浏览 器视口
                      脱离文档流

     fixed      固定定位        定位元素
                  相对于浏览器视口
                  脱离文档流
                  不会随着浏览器的滚动而滚动

     sticky     粘滞            定位元素
                   不脱离文档流
                    使用top、right、bottom、left设置一个过渡点

                    当超过这个过渡点的时候就会体现fixed固定在页面上          

     只有定位元素可以使用top、right、bottom、left、z-index
     脱离文档流特点：默认宽度由内容决定，不占据原先的位置（原先的位置被其他元素抢占）

  4.伸缩盒布局flex

      1：比较

           传统布局：兼容性好
                             布局繁琐
                             局限性，不能在移动端很好的布局

            flex弹性布局：操作方便，布局简单，移动端应用很广泛
                                    PC端浏览器支持情况较差
                                    IE11或更低版本，不支持或部分不支持  

      2.原理

       任何一个容器都可以指定为flex布局
           
           采用flex布局的元素,称为flex容器，他的所有子元素称为flex项目
           容器默认存在俩根轴：水平的主轴和垂直的交叉轴
       
       当我们为父元素设为flex布局后，子元素的float：clear属性即将失效
       当父元素设置display:flex,达到控制子元素的目的

      3.常见父项（容器）属性      

         flex-direction:设置主轴方向

                 row: 主轴在水平方向，起点在左端
                 row-reverse:主轴在水平方向，起点在右端
                 colum：主轴在垂直方向，起点在上沿
                 colum-reverse：主轴在垂直方向，起点在下沿

       flex-wrap: 设置子元素是否换行
   
                nowrap：不换行
                wrap：换行，第一行在上方
                wrap-reverse：换行，第一行在下方

       justify-content:设置主轴上的子元素排列方式

               flex-start             左对齐                
               flex-end              右对齐            
               center                 居中                
               space-around     每个项目俩侧间隔相等
                                          项目间隔比项目与边框的间隔大一倍    
               space-between   俩端对齐，项目之间间隔相等

       align-item   设置侧轴上的子元素排列方式    （单行）            
      
                  flex-start     交叉轴的起点对齐    
                  flex-end        交叉轴终点对齐    
                  stretch       【默认值】将盒子在交叉轴上进行拉伸，直至适应整个伸缩盒子容器
                  center      在交叉轴中心对齐
                  baseline    项目的第一行文字的基线对齐

       align-content 设置侧轴上的子元素排列方式（多行）
             
            flex-start    与交叉轴的起点对齐
            flex-end      与交叉轴的终点对齐
            center        与交叉轴的中点对齐
            space-around  每根轴线两侧的间隔都相等

                                    轴线之间的间隔比轴线与边框的间隔大一倍
            space-between 与交叉轴两端对齐，轴线之间平均分布

      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的速写形式