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:;  控制整個網格在父元素里面的對齊方式.