day18

01-网页制作步骤

网页
1. 新建项目
- html
- css
- js
- img
- font
2. 引入文件
!html文件对应的私有的css文件一定要写在最下面
如果有js文件需要引入，步骤记清楚
3. 写代码
- 自适应布局 html，body{ height: 100%}

02-网格布局

display: grid/inline-grid 设置列 设置有几列 设置每列的宽
grid-template-columns：
- 有几个值，就表示有几列
grid-template-columns: 20px 30px 40px
数值
百分比
repeat(次数, 模式)
repeat(2, 30px)
repeat(3, 20px 30px)
次数 auto-fill 自动填充，
minmax() 最大最小值
auto 自适应
fr 倍数关系
设置行
grid-template-rows
设置行的间距和列的间距
column-gap
row-gap
设置网格元素的排列顺序
grid-auto-flow: column/row
单元格内容的水平对齐方式
justify-items: start/end/center/stretch 默认
单元格内容的垂直对齐方式
align-items: start/end/center/stretch 默认
单元格内容的对齐方式简写
place-items：水平方向 垂直方向,
如果水平和垂直只写一个值，默认另一个值为center
单元格整体的水平对齐方式
justify-content: start/end/center/stretch（默认）
space-between
space-around
space-evenly
单元格整体的垂直对齐方式
align-content: start/end/center/stretch 默认
space-between
space-around
space-evenly
单元格整体的对齐方式的简写
place-content: 水平 垂直
父元素设置单元格名字
grid-template-areas: ‘a . c’
‘d e f’
‘h i j’
. 表示不占位
网格子元素的属性
设置子元素去到哪个单元格

grid-area: f
grid-area:
写法一： 写网格名字
写法二： 行开始线/列开始线/行结束线/列结束线
上/左/下/右

03- 单元格内容的水平对齐方式

justify-items: start/end/center/stretch 默认<br />    单元格内容的垂直对齐方式<br />    align-items: start/end/center/stretch 默认<br />    单元格内容的对齐方式简写<br />    place-items：水平方向 垂直方向,<br />                如果水平和垂直只写一个值，默认另一个值为center<br />    元素水平垂直居中 7<br />    .father {<br />        display: grid;<br />        place-items: center<br />    }

04- 单元格整体的水平对齐方式

justify-content: start/end/center/stretch（默认）<br />                     space-between<br />                     space-around<br />                     space-evenly<br />    单元格整体的垂直对齐方式<br />    align-content: start/end/center/stretch 默认<br />                    space-between<br />                    space-around<br />                    space-evenly<br />    单元格整体的对齐方式的简写<br />    place-content: 水平 垂直

05-指定单元格位置

父元素设置单元格名字<br />    grid-template-areas: 'a . c'<br />                         'd e f'<br />                         'h i j'<br />                        . 表示不占位<br />    设置子元素去到哪个单元格<br />    grid-area: f
网格子元素的属性<br />    grid-area:<br />                写法一： 写网格名字<br />                写法二： 行开始线/列开始线/行结束线/列结束线<br />                        上/左/下/右<br />