CSS学习之布局

1、默认文档流

     1）元素显示的顺序和代码的顺序是一致的
     2）块级元素独占一行空间，默认宽度为父元素的100%，高度由内容或者子元素决定
     3）行内元素共享一行空间，默认宽高都由内容决定

  2、浮动布局

    float（如果一个元素添加float属性，那么这个元素就会成为一个浮动元素）
     属性值： 1)left  向左浮动
              2）right 向右浮动
              3）none  默认，不浮动
              4）inherit  浮动方式继承父元素
     
     特点
       1）当一个元素是浮动元素的时候，它会失去对父元素的支撑，
         即父元素高度为0，脱离文档流，
           
           如何解决
              清除浮动
                1.给父元素添加overflow:hidden
                2.使用伪元素::before    ::after   clear：both；

  3、定位布局

     static       静态（默认）     非定位元素
     relative     相对定位         定位元素
                  相对的是元素原先的位置，不脱离文档流,还占据原先的位置,宽度默认还是100%，可以覆盖在其他元素上
                  只有定位元素才可以使用top left right bottom z-index(默认0)

     absolute     绝对定位          定位元素

                  相对的是距离他最近的父定位元素的位置，没有定位父元素的，相对于视口区的左上角定位。
                  脱离文档流，不占据原先位置,宽度由内容决定

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

     sticky       粘滞定位          定位元素
                        不脱离文档流
                  使用top/right/bottom/left设置一个过度点，当超过这个过度点的时候就会体现fixed固定在页面上

  脱离文档流的特点：默认宽度由内容决定，不占据原先位置（原先的位置被其他元素抢占）

  4.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-items:设置侧轴上的子元素排列方式（单行）

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