flexible.js插件的使用及网格布局

rem的原理：
        根据html  font-size值而定
     插件来进行html的font-size的值的改变。

     适应插件 flexible.js  进行适配

    步骤：
        1：先把html自身所带的控制视口的meta标签 先删除
        2：引入flexible.js
            在head标签里面   <script src="路径"></script>
        3: 计算流程：
            a: ps量出高度88px
            b: 88px / 100px == .88rem;

grid布局 针对的是子元素布局。

 1：形成一个网格结构(父元素添加)：
         display:grid;

     2: 划分行和列
         grid-template-columns:
         grid-template-rows:
          如果是3个值 代表3行或3列 能接受具体的px 也能是百分比
          
   划分行和列的时候的关键字 和 方法:

         a:    repeat(重复的次数,重复的值)
         b:    auto-fill关键字( 自动填充 )
         c:    fr关键字(列宽片段)
         d:    minmax(最小值,最大值)

     3:  grid-gap:20px 30px;  简写形式

     4:  指定某个项目所在的区域:
         grid-template-areas:
                          'a a a'
     　　　　　　'. . b'
     　　　　　　'. c c';
       

        注:  grid-template-areas  必须和 grid-area共同使用
                grid-area放在具体某个项目里面的,指定项目名称.

     5:指定顺序:
         grid-auto-flow:row/column

     6: 内容在项目里面的对齐方式:
         place-items:
        注: 网格内部的内容固定的大小 百分比的时候 左右的对齐方式会产生BUG

     7: place-content:;  控制整个网格在父元素里面的对齐方式.