html css 布局layout

弹性布局

• display:flex;
  • justify-content:space-between; — 水平分布【item之间有相同的边距，和容器之间没边距】
  • justify-content: space-around; — item和item之间以及和容器之间都有边距
  • align-items: center; — 垂直居中分布
  • align-items:stretch; — 如果item没有设置高度,将item在交叉轴上进行拉伸
  • flex-direction: column; — 列
  • flex-direction:row; — 行
  • flex-direction: column-reverse;— 垂直方向反向
  • flex-direction: row-reverse;— 水平方向反向
  • flex-wrap: wrap-reverse; —反向换行
  • flex-wrap: wrap; —换行
  • flex-wrap: nowrap; —不换行
  • order: 1; — 调整顺序

要想使用弹性布局

1. 必须给容器设置display:flex;
2. 容器设置dispaly:flex;之后，item的浮动和display效果就失去作用了【子元素不需要在设置浮动】
3. 默认情况下，内容item会全部分布在主轴方向的一行上,如果放置不下内容item会自动缩小
4. flex-direction 设置当前主轴的方向 row（行） row-reverse(水平方向的反向) column（列） column-reverse（垂直方向的反向）
5. flex-wrap 设置当前item换行的方式 nowrap wrap wrap-reverse
6. flex-flow flex-direction和flex-wrap 的集合写法
7. justify-content item在主轴上的对齐方式 flex-start（起点）flex-end（终点）center（整体居中）space-between（水平分布【item之间有相同的边距，和容器之间没边距】）space-around（item和item之间以及和容器之间都有边距）
8. align-items 调整的是一条轴线上的元素在交叉轴上的对齐方式 flex-start（交叉轴的起点）flex-end（交叉轴的终点）center（交叉轴上居中）如果item没有设置高度，stretch将item在交叉轴上进行拉伸
9. align-content 设置多条轴线在交叉轴上的分布方式
10. order 给每个item一个编号，用来调整顺序
11. flex-grow 如果主轴存在剩余的空隙，值代表当前item要占据剩余空间的比例
12. flex-shrink 在不换行的情况下，如果主轴的空间不足，值代表每个item缩小的比例
13. flex-basis 表示item咋主轴上面要占据的基本宽度【设置在主轴方向上的宽度值】
14. flex flex-grow + flex-shrink + flex-basis的集合写法
15. align-self 单独调整当前item在交叉轴上的对齐方式

响应式布局

媒体查询
    screen 电脑 手机 平板
    查询条件 and（包括）or（或者）not（排除）
    
    1.当分辨率大于1900px时,width变为1800px
       @media screen and (min-width: 1900px){
           .container{
               width:1800px;
           }
       }
       
    2.当分辨率小于1280时起作用
       @media screen and (max-width: 1280px){
           .container{
                     width:800px;
           }
       }
       /*平板*/
    @media screen and (min-width: 600px){
        .container{
            width: 600px;
        }
    }
    /*小分辨率电脑*/
    @media screen and (min-width: 960px){
        .container{
            width: 900px;
        }
    }
    /*大分辨率电脑*/
    @media screen and (min-width: 1240px){
        .container{
            width: 1200px;
        }
    }

元素居中问题

父元素宽高已知

第一种方法：margin: 0 auto;
 
第二种方法  position: absolute;
            left:200px;
            top:200px;

父元素宽高未知

第一种方法：position: absolute;
            left:50%;
            top:50%;
            margin-left: -50px;
            margin-top: -50px;
           //  将具有未知宽高的元素在其父元素中水平垂直居中。其中，margin-left 和 margin-top 
           的偏移量取决于元素自身的宽高。
           在示例中，假设元素的宽高都为 100px，所以偏移量设置为 -50px，
           使元素的中心点与父元素的中心点重合。
            
第二种方法：position: absolute;
            left:calc(50% - 50px);
            top:calc(50% - 50px);
            
第三种方法：position: absolute;
            left:50%;
            top:50%;
            transform: translate(-50px,-50px);
            
第四种方法：position: absolute;
            left:50%;
            top:50%;
            bottom：50%；
            right:50%;
            margin:auto;

父元素子元素宽高未知

第一种方法：给父元素设置弹性布局，子元素内容撑开
            display: flex;
            justify-content: center;
            align-items: center;

设置侧边栏效果

1.左边元素脱离文档流（设置浮动）
      .left{
           float:left;
       }
       .right{
           width:auto;
           margin-left:150px;
       }
2.定位
      .left{
           position: absolute;
           left: 0;
           top:0;
       }
      .right{
           width:auto;
           margin-left:150px;
       }
3.弹性布局
      .box{
          display: flex;
      }
      .right{
          width: auto;
          flex-grow: 1;
      }