H5学习---html，css---网格布局 视口宽

flex是一维布局,grid是二维布局，横纵两个方向总是同时存在的

作用在grid容器上
grid-template-columns对网格进行纵划分,单位可以是px,%,自适应auto,fr(网格剩余空间比例单位)
grid-template-rows网格进行横划分
grid-template-rows:repeat(4,1fr);重复形式

grid-template-areas：grid子项只要使用grid-area属性指定其隶属于哪个区
grid-template以上三个的简写形式

grid-column-gap定义网格间隙
grid-row-gap
grid-gap以上两个简写

justify-items网格元素内容水平呈现方式：拉伸stretch/左中右对齐start/end/center
align-items网格元素内容垂直呈现方式：拉伸/上中下对齐start/end/center
place-items以上两个简写,第一个垂直第二个水平

父容器需要调大的情况下使用：
justify-content网格元素水平分布方式stretch/start/end/center/space-between/space-around/space-evenly
align-content网格元素垂直分布方式
place-content以上简写

作用在grid子项上(单个子元素)

1.grid-column-start水平方向上占据的起始位置
2.grid-column-end水平方向上占据的结束位置(span属性)向后添加的个数
3.grid-row-start垂直方向上占据的起始位置
4.grid-row-end垂直方向上占据的结束位置(span属性)
5.grid-column：1和2的缩写
6.grid-row：3和4的缩写
	例grid-column:2 / 4;

7.grid-area当前网格所占用的区域
	grid-area：3横向起始/2纵向起始/4横向结束/4纵向结束

8.justify-self单个网格元素的水平对齐方式start/end/center
9.align-self单个网格元素的垂直对齐方式
10.place-self：9和8的缩写

vw+rem布局

1vw = 1%视口宽
100vw = 视口宽
100vh = 视口高
html{
	font-size:100px;最合适,量完尺寸/2后小数点直接向前进两位
	换算成vw?可以让根元素font-size时时发生改变
	iphone6/7/8: 100vw = 375px
		100px = 26.67vw
	iphone5: 100vw = 320px
		100px = 31.25vw
}