rem布局&grid布局

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:;  控制整个网格在父元素里面的对齐方式.

隐藏滚动条注:

元素::-webkit-scrollbar {display:none} 
chrome 和Safari
.element::-webkit-scrollbar { display:none }
IE 10+
.element { -ms-overflow-style: none; }
Firefox
.element { overflow: -moz-scrollbars-none; }