4月16日grid布局知识点梳理

vw + rem 完成移动端布局
根据设计图：
640px html{font-size:31.25vw}
750px html{font-size:26.67vw}
vw???
vw会根据视口的变化而变化
rem的原理：
根据html font-size值而定
插件来进行html的font-size的值的改变。
适应插件 flexible.js 进行适配
步骤：
1：先把html自身所带的控制视口的meta标签 先删除
2：引入flexible.js
在head标签里面
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:; 控制整个网格在父元素里面的对齐方式.
start - 对齐容器的起始边框。
end - 对齐容器的结束边框。
center - 容器内部居中。
stretch - 项目大小没有指定时，拉伸占据整个网格容器。
space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。
space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔。
pace-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。
1:指定项目的四个边框，分别定位在哪根网格线。
grid-column-start属性：左边框所在的垂直网格线
grid-column-end属性：右边框所在的垂直网格线
grid-row-start属性：上边框所在的水平网格线
grid-row-end属性：下边框所在的水平网格线
2:grid-column ， grid-row
grid-column属性是grid-column-start和grid-column-end的合并简写形式
grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。
grid-column: 1 / 3;
grid-row: 1 / 2;
今天老师带领我们学习新课程，rem的原理： grid布局 针对的是子元素布局， 指定项目的四个边框，分别定位在哪根网格线 ，grid-column ， grid-row 感觉老师讲的太快了，基础太差有些跟不上，前几天外出办事课程跟不上了，听不懂老师讲的了有点怀疑人生了。希望能从头再学一遍多给些练习的时间。老师的期望太高了，我现在只停留在能听懂的阶段，只能比着老师的案例写，问题也归纳不出来，只感觉脑子里一团浆糊。虽然也能听得懂， 但是思维逻辑跟不上，案例转换方面不灵活老师一往深里讲就犯晕。到自己单独作的时候，却是有一种无从下手的感觉。也不知道能不能学会这一行，心理也是有一点担忧。只能硬着头皮学下去实在不行的话就留级，好想线下上课主要是家里有琐事打扰，想要全身心投入学习中！因为我想要改变以后的生活，不得不砥砺前行。