2020.0416grid网格布局

知识总结

一、Rem
Rem原理:根据html值而定
可以用插件来进行html的font-size的值的改变
适应插件 flexble.js进行适配
步骤:
1:先把html自身所带的控制视口的meat标签先删除
2:引入flexble.js，在head里面< srcipt src=”路径”></ srcipt>
3:计算流程:
a:ps量出高度88px
b:88px/100px==0.88rem;
二、grid网格布局
Grid布局，针对的是子元素布局。
1:形成一个网格布局(父元素添加):
Display:grid;
2:划分行和列:
Grid-template-columns:
Grid-template-rows:
如果是3个值，代表3行或3列，能接受具体的px也能是百分比。
划分行和列的时候的关键字和方法:
A:repeat(重复的次数，重复的值)
B:auto-fill关键字(自动填充)
C:fr关键字(列宽片段)
D:min，max(最小值最大值)
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:palce-content:;控制整个网格在父元素里面的对齐方式。