[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Fdpnw6g4-1630855794515)(http://res.42du.cn/up/grid/explicit-1.jpg)]
2.2 例4
`grid {
display: grid;
grid-template-columns: 90px 50px 120px;
}`
类似于行的定义,属性grid-template-columns
用于定义列的尺寸。
因为定义中只有三列,所以项目4,5,6排在新的一行; 并因为它们位于第1,2,3列的轨道上,所以其宽度等于定义中第1,2,3列轨道的宽度。
网格项目的第1列,第2列,第3列的宽度分别是 90px, 50px 和 120px 。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v5cKMXAB-1630855794516)(http://res.42du.cn/up/grid/explicit-2.jpg)]
2.3 例5
`grid {
display: grid;
grid-template-columns: 1fr 1fr 2fr;
}`
单位fr
用于表示轨道尺寸配额,表示按配额比例分配可用空间。
本例中,项目1占 1/4 宽度,项目2占 1/4 宽度,项目3占 1/2 宽度。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YEo43Xup-1630855794518)(http://res.42du.cn/up/grid/explicit-3.jpg)]
2.4 例6
`grid {
display: grid;
grid-template-columns: 3rem 25% 1fr 2fr;
}`
单位fr
和其它长度单位混合使用时,fr
的计算基于其它单位分配后的剩余空间。
本例中,1fr = (容器宽度 - 3rem - 容器宽度的25%) / 3
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wG4EONxa-1630855794519)(http://res.42du.cn/up/grid/explicit-4.jpg)]
3 轨道的最小最大尺寸设置
函数minmax()
用于定义轨道最小/最大边界值。
3.1 例7
`grid {
display: grid;
grid-template-rows: minmax(100px, auto);
grid-template-columns: minmax(auto, 50%) 1fr 3em;
}`
函数minmax()
接收两个参数:第一个参数表示最小轨道尺寸,第二个参数表示最大轨道尺寸。长度值可以是auto,表示轨道尺寸可以根据内容大小进行伸长或收缩。
本例中,第一行最小高度设置成100px,但是最大高度设置成auto
,表示行高可以根据内容伸长超过100px。
本例中,第一列宽度的最大值设置成50%,表示其宽度不能超过整个容器宽度的50%。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AdA3a5NJ-1630855794521)(http://res.42du.cn/up/grid/mimmax-1.jpg)]
4 重复的网格轨道
函数repeat()
用来定义重复的网格轨道,尤其适用于有多个相同项目的情况下。
4.1 例8
`grid {
display: grid;
grid-template-rows: repeat(4, 100px);
grid-template-columns: repeat(3, 1fr);
}`
函数repeat()
接收两个参数:第一个参数表示重复的次数,第二个参数表示轨道尺寸。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P4Ipjoho-1630855794522)(http://res.42du.cn/up/grid/repeat-1.jpg)]
4.2 例9
`grid {
display: grid;
grid-template-columns: 30px repeat(3, 1fr) 30px;
}`
函数repeat()
可以用在轨道定义列表当中。
本例中,第1列和第5列的宽度是30px。函数repeat()
创建了中间3列,每一列宽度都是1fr
。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j742QaOy-1630855794522)(http://res.42du.cn/up/grid/repeat-2.jpg)]
5 定义网格间隙
属性grid-column-gap
和 grid-row-gap
用于定义网格间隙。
网格间隙只创建在行列之间,项目与边界之间无间隙。
5.1 例10
`grid {
display: grid;
grid-row-gap: 20px;
grid-column-gap: 5rem;
}`
间隙尺寸可以是任何非负的长度值(px,%,em等)。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JN8mPNHN-1630855794523)(http://res.42du.cn/up/grid/gap-1.jpg)]
5.2 例11
`grid {
display: grid;
grid-gap: 100px 1em;
}`
属性grid-gap
是grid-row-gap
和grid-column-gap
的简写形式。
第一个值表示行间隙,第二个值表示列间隙。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uSKKYPb0-1630855794524)(http://res.42du.cn/up/grid/gap-2.jpg)]
5.3 例12
`grid {
display: grid;
grid-gap: 2rem;
}`
如只有一个值,则其即表示行间隙,也表示列间隙。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0u16OlcO-1630855794524)(http://res.42du.cn/up/grid/gap-3.jpg)]
6 用网格线编号定位项目
网格线本质上是用来表示网格轨道的开始和结束。
每一条网格线编号都以1开始,以1为步长向前编号,其中包括行列两组网格线。
6.1 例13
`.item1 {
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 2;
grid-column-end: 3;
}`
这是一个3行2列的网格,即在行上有4条网格线,在列上有3条网格线。项目1利用网格线编号定位在第2行第2列的位置上。
本例中,项目只跨越一行一列,则grid-row-end
和grid-column-end
的定义可以省略。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PnNdxDRo-1630855794525)(http://res.42du.cn/up/grid/line-number-1.jpg)]
6.2 例14
`.item1 {
grid-row: 2;
grid-column: 3 / 4;
}`
属性grid-row
是 grid-row-start
和 grid-row-end
的简写形式。
属性grid-column
是 grid-column-start
和 grid-column-end
的简写形式。
如果只指定一个值,它表示 grid-row/column-start
。
如果两个值都指定,第一个表示 grid-row/column-start
,第二个值表示grid-row/column-end
。而且你必须用斜杠(/)分隔这两个值。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8L8o937b-1630855794526)(http://res.42du.cn/up/grid/line-number-2.jpg)]
6.3 例15
`.item1 {
grid-area: 2 / 2 / 3 / 3;
}`
属性grid-area
是 grid-row-start
, grid-column-start
, grid-row-end
和 grid-column-end
的简写形式。
如果四个值都指定,则第一个表示 grid-row-start
, 第二个表示 grid-column-start
, 第三个表示 grid-row-end
,第四个表示 grid-column-end
。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hk9FXOF8-1630855794526)(http://res.42du.cn/up/grid/line-number-3.jpg)]
7 网格项目跨越行列
网格项目默认都占用一行和一列,但可以使用前一节中定位项目的属性来指定项目跨越多行或多列。
7.1 例16
`.item1 {
grid-column-start: 1;
grid-column-end: 4;
}`
通过grid-column-start
和grid-column-end
属性值的设置,使该网格项目跨越多列。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HPkyCBc6-1630855794527)(http://res.42du.cn/up/grid/span-1.jpg)]
7.2 例17
`.item1 {
grid-row-start: 1;
grid-row-end: 4;
}`
通过grid-row-start
和grid-row-end
属性值的设置,使该网格项目跨越多行。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EQC4gEg3-1630855794527)(http://res.42du.cn/up/grid/span-2.jpg)]
7.3 例18
`.item1 {
grid-row: 2 / 5;
grid-column: 2 / 4;
}`
简写属性 grid-row
和 grid-column
即能用来定位项目,也能用来使项目跨越多个行列。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-19OQ51r1-1630855794528)(http://res.42du.cn/up/grid/span-3.jpg)]
7.4 例19
`.item1 {
grid-row: 2 / span 3;
grid-column: span 2;
}`
关键字 span
用来指定跨越行或列的数量。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bTj6bK5o-1630855794529)(http://res.42du.cn/up/grid/span-4.jpg)]
8 网格线命名
当利用属性grid-template-rows
和 grid-template-columns
定义网格时,可以同时定义网格线的名称。网格线名称可以用于定位网格项目。
8.1 例20
`grid {
display: grid;
grid-template-rows: [row-1-start] 1fr [row-2-start] 1fr [row-2-end];
grid-template-columns: [col-1-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-3-end];
}`
用属性grid-template-rows
和 grid-template-columns
定义网格,同时定义网格线名称。
为避免混淆,网格线名称应避免使用规范中的关键字(span
等)。
定义网格线名称的方法是要将其放在中括号内([name-of-line]
),并要和网格轨道相对应。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0R2wsXlX-1630855794529)(http://res.42du.cn/up/grid/line-name-1.jpg)]
8.2 例21
`grid {
display: grid;
grid-template-rows: [row-start row-1-start] 1fr [row-1-end row-2-start] 1fr [row-2-end row-end];
grid-template-columns: [col-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-end];
}`
可以给同一网格线定义多个名称,方法就是在中括号内用空格将多个名称分开。
每一个网格线名都可以被引用,以用来定位网格项目。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j2fI0KBN-1630855794530)(http://res.42du.cn/up/grid/line-name-2.jpg)]
9 用网格线名定位项目
利用命名的网格线,可以很方便地进行项目定位。
9.1 例22
`.item1 {
grid-row-start: row-2-start;
grid-row-end: row-end;
grid-column-start: col-2-start;
grid-column-end: col-end;
}`
引用网格线名称不用加中括号。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oHo5r5JC-1630855794530)(http://res.42du.cn/up/grid/p-by-name-1.jpg)]
9.2 例23
`.item1 {
grid-row: row-2-start / row-end;
grid-column: col-2-start / col-end;
}`
简写属性grid-row
和 grid-column
也可以利用网格线名称来定位项目。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vOJzUdVM-1630855794531)(http://res.42du.cn/up/grid/p-by-name-2.jpg)]
10 用同名网格线命名和定位项目
函数repeat()
可以定义同名网格线。这节省了给每条网格都命名的时间。
10.1 例24
`grid {
display: grid;
grid-template-rows: repeat(3, [row-start] 1fr [row-end]);
grid-template-columns: repeat(3, [col-start] 1fr [col-end]);
}`
函数repeat()
可以用来定义同名网格线。 这样多个网格线拥有相同的名字。
同名网格线会被分配一个位置编号,做为其唯一标识。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-prcotxoY-1630855794531)(http://res.42du.cn/up/grid/p-same-name-1.jpg)]
10.2 例25
`.item1 {
grid-row: row-start 2 / row-end 3;
grid-column: col-start / col-start 3;
}`
用同名网格线来定位项目时,应注意在网格线名称和编号之间有一个空格。
本例中,项目1的行定位开始于第2条名称是row-start
的网格线,结束于第3条名称是row-end
的网格线;列定位开始于第1条名称是col-start
的网格线,结束于第3条名称是col-start
的网格线。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ycjdW4D1-1630855794532)(http://res.42du.cn/up/grid/p-same-name-2.jpg)]
11 用网格区域命名和定位项目
如同网格线命名,可以用属性grid-template-areas
给网格区域命名。网格区域名称可以用来定位网格项目。
11.1 例26
`grid {
display: grid;
grid-template-areas: "header header"
"content sidebar"
"footer footer";
grid-template-rows: 150px 1fr 100px;
grid-template-columns: 1fr 200px;
}`
一组区域名称要放在单引号或双引号内,每一个名称之间以空格分隔。
每一组名称定义一行,每一个名称定义一列。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R14Vw0bb-1630855794533)(http://res.42du.cn/up/grid/area-1.jpg)]
11.2 例27
`header {
grid-row-start: header;
grid-row-end: header;
grid-column-start: header;
grid-column-end: header;
}`
网格区域名称可以用在属性grid-row-start
, grid-row-end
, grid-column-start
, 和 grid-column-end
的值中,用来定位项目。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nqbSJaNk-1630855794533)(http://res.42du.cn/up/grid/area-2.jpg)]
11.3 例28
`footer {
grid-row: footer;
grid-column: footer;
}`
网格区域名称也可以用于简写属性grid-row
和 grid-column
的值中。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LDED7w3W-1630855794534)(http://res.42du.cn/up/grid/area-3.jpg)]
11.4 例29
`aside {
grid-area: sidebar;
}`
网格区域名称也可以用于简写属性grid-area
的值中。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YyrrLq6m-1630855794535)(http://res.42du.cn/up/grid/area-4.jpg)]
12 隐式网格
隐式网格用来在显式网格之外定位项目。有时在显示网格中没有足够的空间,或者是要在显示网格之外定位项目就要用到隐式网格。这时可以把这些项目放置在隐式网格中。
隐式网格可以通过属性 grid-auto-rows
, grid-auto-columns
, 和 grid-auto-flow
来定义。
12.1 例30
`grid {
display : grid;
grid-template-rows: 70px;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 140px;
}`
本例中,只定一个行轨道,因此项目 1 和 2 高 70px 。
第2行轨道有隐式网格自动创建并为项目 3 和 4 分配了空间。 属性grid-auto-rows
定义了隐式网格的行轨道尺寸,即项目3和4的高度是 140px 。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7tkbBXql-1630855794535)(http://res.42du.cn/up/grid/implicit-1.jpg)]
12.2 例31
`grid {
display : grid;
grid-auto-flow: row;
}`
缺省的网格布局方向是行的方向(row
)。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OSjU9oH8-1630855794536)(http://res.42du.cn/up/grid/implicit-2.jpg)]
12.3 例32
`grid {
display : grid;
grid-auto-flow: column;
}`
网格的布局方向可以定义为列的方向(column)。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Kbc21bdG-1630855794536)(http://res.42du.cn/up/grid/implicit-3.jpg)]
12.4 例33
`grid {
display : grid;
grid-template-columns: 30px 60px;
grid-auto-flow: column;
grid-auto-columns: 1fr;
}`
本例中,我们只定义了两个列轨道的尺寸30px 和 60px。
隐式网格中自动创建其它列并给项目3,4,5分配空间;分配的空间尺寸是通过属性 grid-auto-columns
定义的。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0wQIySi6-1630855794537)(http://res.42du.cn/up/grid/implicit-4.jpg)]
13 隐式命名的网格区域
网格线名称可以任意指定,但分配以 -start
和 -end
结尾的名字有额外的益处,这样隐式地创建了具名网格区域,该名称可以用于项目定位。
13.1 例34
`grid {
display : grid;
grid-template-rows: [outer-start] 1fr [inner-start] 1fr [inner-end] 1fr [outer-end];
grid-template-columns: [outer-start] 1fr [inner-start] 1fr [inner-end] 1fr [outer-end];
}`
本例中,行和列都有名为inner-start
和 inner-end
的网格线,它们隐式地给网格区域分派了名称(inner
)。
`item1 {
grid-area: inner;
}`
这样我们就能够直接使用网格区域名来定位,而不需要再用网格线来定位项目了。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FGUhY6py-1630855794538)(http://res.42du.cn/up/grid/implicit-area-1.jpg)]
14 隐式命名的网格线
隐式命名网格线和隐式命名的网格区域的工作原理刚好相反。
14.1 例35
`grid {
display : grid;
grid-template-areas: "header header"
"content sidebar"
"footer footer";
grid-template-rows: 80px 1fr 40px;
grid-template-columns: 1fr 200px;
}`
定义网格区域时隐式的命名了网格线的名称。这些网格线的名称是基于区域名加上-start
或 -end
后缀组成的。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LscuxBPK-1630855794538)(http://res.42du.cn/up/grid/implicit-line-1.jpg)]
14.2 例36
`item1 {
grid-row-start: header-start;
grid-row-end: content-start;
grid-column-start: footer-start;
grid-column-end: sidebar-end;
}`
本例中,header是通过隐式网格线名称进行定位的。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EJIWmfl9-1630855794539)(http://res.42du.cn/up/grid/implicit-line-2.jpg)]
15 层叠网格项目
通过项目定位可以使多个项目层叠在一起,属性z-index
可以改变层叠项目的层次。
15.1 例37
`.item-1, .item-2 {
grid-row-start: 1;
grid-column-end: span 2;
}
.item-1 { grid-column-start: 1; z-index: 1; }
.item-2 { grid-column-start: 2 }`
本例中,项目1 和 2 行定位开始于第1条行网格线,并跨越两列。
两个项目都是用网格线编号进行定位。项目1起始于第1条列网格线,项目2起始于第2条列网格线,这使得两个项目在第一行中间列发生层叠。
缺省情况下,项目2将层叠于项目1之上;然而,给项目1设置属性z-index: 1
就使得项目1层叠于项目2之上。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6OiwR8Wm-1630855794539)(http://res.42du.cn/up/grid/layer-1.jpg)]
15.2 例38
`.overlay {
grid-row-start: header-start;
grid-row-end: content-end;
grid-column-start: content-start;
grid-column-end: sidebar-start;
z-index: 1;
}`
本例中,利用在 grid-template-areas
定义中的隐式网格线名称,定位了一个网格项目(overlay
),并将层叠于上层。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HlcRNYBn-1630855794540)(http://res.42du.cn/up/grid/layer-2.jpg)]
16 网格项目的对齐方式
CSS的 盒模型对齐模块 补充了CSS网格的内容,网格项目可以按行或列的轴线方向实现多种对齐方式。
属性justify-items
和 justify-self
以行轴为参照对齐项目,属性align-items
和 align-self
以列轴为参照对齐项目。
属性justify-items
和 align-items
是网格容器的属性,并支持如下这些值:
-
auto
-
normal
-
start
-
end
-
center
-
stretch
-
baseline
-
first baseline
结局:总结+分享
看完美团、字节、腾讯这三家的一二三面试问题,是不是感觉问的特别多,可能咱们真的又得开启面试造火箭、工作拧螺丝的模式去准备下一次的面试了。
开篇有提及我可是足足背下了Java互联网工程师面试1000题,多少还是有点用的呢,换汤不换药,不管面试官怎么问你,抓住本质即可!能读到此处的都是真爱
CodeChina开源项目:【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频】
- Java互联网工程师面试1000题
而且从上面三家来看,算法与数据结构是必备不可少的呀,因此我建议大家可以去刷刷这本左程云大佬著作的 《程序员代码面试指南 IT名企算法与数据结构题目最优解》,里面近200道真实出现过的经典代码面试题。
- 程序员代码面试指南–IT名企算法与数据结构题目最优解
- 其余像设计模式,建议可以看看下面这4份PDF(已经整理)
- 更多的Java面试学习笔记如下,关于面试这一块,我额外细分出Java基础-中级-高级开发的面试+解析,以及调优笔记等等等。。。
-row-end: content-end;
grid-column-start: content-start;
grid-column-end: sidebar-start;
z-index: 1;
}`
本例中,利用在 `grid-template-areas` 定义中的隐式网格线名称,定位了一个网格项目(`overlay`),并将层叠于上层。
[外链图片转存中...(img-HlcRNYBn-1630855794540)]
[演示程序]( )
16 网格项目的对齐方式
------------
CSS的 [盒模型对齐模块]( ) 补充了CSS网格的内容,网格项目可以按行或列的轴线方向实现多种对齐方式。
属性`justify-items` 和 `justify-self` 以行轴为参照对齐项目,属性`align-items` 和 `align-self` 以列轴为参照对齐项目。
属性`justify-items` 和 `align-items` 是网格容器的属性,并支持如下这些值:
* auto
* normal
* start
* end
* center
* stretch
* baseline
* first baseline
## 结局:总结+分享
看完美团、字节、腾讯这三家的一二三面试问题,是不是感觉问的特别多,可能咱们真的又得开启面试造火箭、工作拧螺丝的模式去准备下一次的面试了。
开篇有提及我可是足足背下了**Java互联网工程师面试1000题**,多少还是有点用的呢,换汤不换药,不管面试官怎么问你,抓住本质即可!能读到此处的都是真爱
**[CodeChina开源项目:【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频】](https://codechina.csdn.net/m0_60958482/java-p7)**
* **Java互联网工程师面试1000题**
[外链图片转存中...(img-cnBgyjLM-1630855794540)]
而且从上面三家来看,算法与数据结构是必备不可少的呀,因此我建议大家可以去刷刷这本左程云大佬著作的 《程序员代码面试指南 IT名企算法与数据结构题目最优解》,里面近200道真实出现过的经典代码面试题。
* **程序员代码面试指南--IT名企算法与数据结构题目最优解**
[外链图片转存中...(img-6ogSgUNs-1630855794541)]
* 其余像设计模式,建议可以看看下面这4份PDF(已经整理)
[外链图片转存中...(img-5eZFl5bH-1630855794542)]
* 更多的Java面试学习笔记如下,关于面试这一块,我额外细分出Java基础-中级-高级开发的面试+解析,以及调优笔记等等等。。。
[外链图片转存中...(img-lbFlRCw5-1630855794543)]
以上所提及的全部Java面试学习的PDF及笔记,如若皆是你所需要的,那么都可发送给你!