day24 html5

day24知识点

网格布局：grid布局：针对的是子元素布局
1：形成一个网格结构（给父元素添加）：
display：grid

   2：划分行和列
     grid-template-columns：3,200px；
     grid-template-rows：3,200px；
     显示3行3列
     如果是3个值 代表3行3列 能接受具体的px 也能是百分比

   划分行和列的时候的关键字 和 方法
   a： repeat(重复的次数，重复的值)
   b： auto-fill关键字（自动填充）
   c： fr关键字       （列表片段）
   d： minmax         （最小值，最大值）

grid-gap：20px 30px；简写方式

指定某个项目所在的区域:
grid-template-areas:
‘a a a’
‘. . b’
‘. c c’;

    注:  grid-template-areas  必须和 grid-area共同使用  grid-area放在具体某个项目里面的,指定项目名称.

指定顺序:grid-auto-flow:row/column

内容在项目里面的对齐方式:place-items:

    注: 网格内部的内容固定的大小 百分比的时候 左右的对齐方式会产生BUG

控制整个网格在父元素里面的对齐方式.place-content:;