html图片文字 网格布局,【图片版】CSS网格布局（Grid）完全教程
## 简言
CSS网格布局(Grid)是一套二维的页面布局系统，它的出现将完全颠覆页面布局的传统方式。传统的CSS页面布局 一直不够理想。包括table布局、浮动、定位及内联块等方式，从本质上都是Hack的方式，并且遗漏了一些重要的功能(比如：垂直居中)。Flexbox的出现部分解决了上述问题，但Flex布局是为了解决简单的一维布局，适用于页面局部布局。而Grid天然就是为了解决复杂的二维布局而出现的，适用页面的整体布局。在实际工作中，Grid和Flexbox不但不矛盾，而且还能很好的结合使用。做为WEB程序员，我们在页面布局问题上都付出过努力，也将不断探索新的方案。而Grid是第一个专门为布局问题而生的CSS模块，我们有理由对Grid充满期待。
本文包括18个小节，62个实例，完整阅读需要时间20分钟以上。
为了获得最佳的阅体验，可以访问如下格式的教程：
[学习CSS网格](http://topic.42du.cn/grid)
## 1 网格容器
将属性 `display` 值设为 `grid` 或 `inline-grid` 就创建了一个网格容器，所有容器直接子结点自动成为网格项目。
### 1.1 例1
```css
grid {
display: grid;
｝
```
网格项目按行排列，网格项目占用整个容器的宽度。
[演示程序](http://www.42du.cn/run/122)
### 1.1 例2
```css
grid {
display: inline-grid;
｝
```
网格项目按行排列，网格项目宽度由自身宽度决定。
[演示程序](http://www.42du.cn/run/123)
## 2 显示网格
属性`grid-template-rows`和`grid-template-columns`用于显示定义网格，分别用于定义行轨道和列轨道。
### 2.1 例3
```css
grid {
display: grid;
grid-template-rows: 50px 100px；
｝
```
属性`grid-template-rows`用于定义行的尺寸，即轨道尺寸。轨道尺寸可以是任何非负的长度值(px，%，em，等)
网格项目1的行高是50px，网格项目2的行高是100px。
因为只定义了两个行高，网格项目3和4的行高取决于其本身的高度。
[演示程序](http://www.42du.cn/run/124)
### 2.2 例4
```css
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 。
[演示程序](http://www.42du.cn/run/125)
### 2.3 例5
```css
grid {
display: grid;
grid-template-columns: 1fr 1fr 2fr；
｝
```
单位`fr`用于表示轨道尺寸配额，表示按配额比例分配可用空间。
本例中，项目1占 1/4 宽度，项目2占 1/4 宽度，项目3占 1/2 宽度。
[演示程序](http://www.42du.cn/run/126)
### 2.4 例6
```css
grid {
display: grid;
grid-template-columns: 3rem 25% 1fr 2fr；
｝
```
单位`fr`和其它长度单位混合使用时，`fr`的计算基于其它单位分配后的剩余空间。
本例中，`1fr = (容器宽度 - 3rem - 容器宽度的25%) / 3`
[演示程序](http://www.42du.cn/run/127)
## 3 轨道的最小最大尺寸设置
函数`minmax()`用于定义轨道最小/最大边界值。
### 3.1 例7
```css
grid {
display: grid;
grid-template-rows: minmax(100px, auto);
grid-template-columns: minmax(auto, 50%) 1fr 3em;
｝
```
函数`minmax()`接收两个参数：第一个参数表示最小轨道尺寸，第二个参数表示最大轨道尺寸。长度值可以是auto，表示轨道尺寸可以根据内容大小进行伸长或收缩。
本例中，第一行最小高度设置成100px，但是最大高度设置成`auto`，表示行高可以根据内容伸长超过100px。
本例中，第一列宽度的最大值设置成50%，表示其宽度不能超过整个容器宽度的50%。
[演示程序](http://www.42du.cn/run/128)
## 4 重复的网格轨道
函数`repeat()`用来定义重复的网格轨道，尤其适用于有多个相同项目的情况下。
### 4.1 例8
```css
grid {
display: grid;
grid-template-rows: repeat(4, 100px);
grid-template-columns: repeat(3, 1fr);
｝
```
函数`repeat()`接收两个参数：第一个参数表示重复的次数，第二个参数表示轨道尺寸。
[演示程序](http://www.42du.cn/run/129)
### 4.2 例9
```css
grid {
display: grid;
grid-template-columns: 30px repeat(3, 1fr) 30px;
｝
```
函数`repeat()`可以用在轨道定义列表当中。
本例中，第1列和第5列的宽度是30px。函数`repeat()`创建了中间3列，每一列宽度都是`1fr`。
[演示程序](http://www.42du.cn/run/130)
## 5 定义网格间隙
属性`grid-column-gap` 和 `grid-row-gap`用于定义网格间隙。
网格间隙只创建在行列之间，项目与边界之间无间隙。
### 5.1 例10
```css
grid {
display: grid;
grid-row-gap: 20px;
grid-column-gap: 5rem;
｝
```
间隙尺寸可以是任何非负的长度值(px，%，em等)。
[演示程序](http://www.42du.cn/run/131)
### 5.2 例11
```css
grid {
display: grid;
grid-gap: 100px 1em;
｝
```
属性`grid-gap`是`grid-row-gap`和`grid-column-gap`的简写形式。
第一个值表示行间隙，第二个值表示列间隙。
[演示程序](http://www.42du.cn/run/132)
### 5.3 例12
```css
grid {
display: grid;
grid-gap: 2rem;
｝
```
如只有一个值，则其即表示行间隙，也表示列间隙。
[演示程序](http://www.42du.cn/run/133)
## 6 用网格线编号定位项目
网格线本质上是用来表示网格轨道的开始和结束。
每一条网格线编号都以1开始，以1为步长向前编号，其中包括行列两组网格线。
### 6.1 例13
```css
.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`的定义可以省略。
[演示程序](http://www.42du.cn/run/134)
### 6.2 例14
```css
.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`。而且你必须用斜杠(/)分隔这两个值。
[演示程序](http://www.42du.cn/run/135)
### 6.3 例15
```css
.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`。
[演示程序](http://www.42du.cn/run/136)
## 7 网格项目跨越行列
网格项目默认都占用一行和一列，但可以使用前一节中定位项目的属性来指定项目跨越多行或多列。
### 7.1 例16
```css
.item1 {
grid-column-start: 1;
grid-column-end: 4;
}
```
通过`grid-column-start`和`grid-column-end`属性值的设置，使该网格项目跨越多列。
[演示程序](http://www.42du.cn/run/137)
### 7.2 例17
```css
.item1 {
grid-row-start: 1;
grid-row-end: 4;
}
```
通过`grid-row-start`和`grid-row-end`属性值的设置，使该网格项目跨越多行。
[演示程序](http://www.42du.cn/run/138)
### 7.3 例18
```css
.item1 {
grid-row: 2 / 5;
grid-column: 2 / 4;
}
```
简写属性 `grid-row` 和 `grid-column` 即能用来定位项目，也能用来使项目跨越多个行列。
[演示程序](http://www.42du.cn/run/139)
### 7.4 例19
```css
.item1 {
grid-row: 2 / span 3;
grid-column: span 2;
}
```
关键字 `span` 用来指定跨越行或列的数量。
[演示程序](http://www.42du.cn/run/140)
## 8 网格线命名
当利用属性`grid-template-rows` 和 `grid-template-columns`定义网格时，可以同时定义网格线的名称。网格线名称可以用于定位网格项目。
### 8.1 例20
```css
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]`)，并要和网格轨道相对应。
### 8.2 例21
```css
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];
｝
```
可以给同一网格线定义多个名称，方法就是在中括号内用空格将多个名称分开。
每一个网格线名都可以被引用，以用来定位网格项目。
## 9 用网格线名定位项目
利用命名的网格线，可以很方便地进行项目定位。
### 9.1 例22
```css
.item1 {
grid-row-start: row-2-start;
grid-row-end: row-end;
grid-column-start: col-2-start;
grid-column-end: col-end;
}
```
引用网格线名称不用加中括号。
[演示程序](http://www.42du.cn/run/141)
### 9.2 例23
```css
.item1 {
grid-row: row-2-start / row-end;
grid-column: col-2-start / col-end;
}
```
简写属性`grid-row` 和 `grid-column`也可以利用网格线名称来定位项目。
[演示程序](http://www.42du.cn/run/142)
## 10 用同名网格线命名和定位项目
函数`repeat()`可以定义同名网格线。这节省了给每条网格都命名的时间。
### 10.1 例24
```css
grid {
display: grid;
grid-template-rows: repeat(3, [row-start] 1fr [row-end]);
grid-template-columns: repeat(3, [col-start] 1fr [col-end]);
}
```
函数`repeat()`可以用来定义同名网格线。 这样多个网格线拥有相同的名字。
同名网格线会被分配一个位置编号，做为其唯一标识。
### 10.2 例25
```css
.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`的网格线。
[演示程序](http://www.42du.cn/run/143)
## 11 用网格区域命名和定位项目
如同网格线命名，可以用属性`grid-template-areas`给网格区域命名。网格区域名称可以用来定位网格项目。
### 11.1 例26
```css
grid {
display: grid;
grid-template-areas: "header header"
"content sidebar"
"footer footer";
grid-template-rows: 150px 1fr 100px;
grid-template-columns: 1fr 200px;
}
```
一组区域名称要放在单引号或双引号内，每一个名称之间以空格分隔。
每一组名称定义一行，每一个名称定义一列。
### 11.2 例27
```css
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`的值中，用来定位项目。
### 11.3 例28
```css
footer {
grid-row: footer;
grid-column: footer;
}
```
网格区域名称也可以用于简写属性`grid-row` 和 `grid-column`的值中。
### 11.4 例29
```css
aside {
grid-area: sidebar;
}
```
网格区域名称也可以用于简写属性`grid-area`的值中。
[演示程序](http://www.42du.cn/run/144)
## 12 隐式网格
隐式网格用来在显式网格之外定位项目。有时在显示网格中没有足够的空间，或者是要在显示网格之外定位项目就要用到隐式网格。这时可以把这些项目放置在隐式网格中。
隐式网格可以通过属性 `grid-auto-rows`, `grid-auto-columns`, 和 `grid-auto-flow` 来定义。
### 12.1 例30
```css
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 。
[演示程序](http://www.42du.cn/run/145)
### 12.2 例31
```css
grid {
display : grid;
grid-auto-flow: row;
}
```
缺省的网格布局方向是行的方向(`row`)。
### 12.3 例32
```css
grid {
display : grid;
grid-auto-flow: column;
}
```
网格的布局方向可以定义为列的方向(column)。
### 12.4 例33
```css
grid {
display : grid;
grid-template-columns: 30px 60px;
grid-auto-flow: column;
grid-auto-columns: 1fr;
}
```
本例中，我们只定义了两个列轨道的尺寸30px 和 60px。
隐式网格中自动创建其它列并给项目3，4，5分配空间；分配的空间尺寸是通过属性 `grid-auto-columns`定义的。
[演示程序](http://www.42du.cn/run/146)
## 13 隐式命名的网格区域
网格线名称可以任意指定，但分配以 `-start` 和 `-end` 结尾的名字有额外的益处，这样隐式地创建了具名网格区域，该名称可以用于项目定位。
### 13.1 例34
```css
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`)。
```css
item1 {
grid-area: inner;
}
```
这样我们就能够直接使用网格区域名来定位，而不需要再用网格线来定位项目了。
[演示程序](http://www.42du.cn/run/147)
## 14 隐式命名的网格线
隐式命名网格线和隐式命名的网格区域的工作原理刚好相反。
### 14.1 例35
```css
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`后缀组成的。
### 14.2 例36
```css
item1 {
grid-row-start: header-start;
grid-row-end: content-start;
grid-column-start: footer-start;
grid-column-end: sidebar-end;
}
```
本例中，header是通过隐式网格线名称进行定位的。
[演示程序](http://www.42du.cn/run/148)
## 15 层叠网格项目
通过项目定位可以使多个项目层叠在一起，属性`z-index`可以改变层叠项目的层次。
### 15.1 例37
```css
.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之上。
[演示程序](http://www.42du.cn/run/149)
### 15.2 例38
```css
.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`)，并将层叠于上层。
[演示程序](http://www.42du.cn/run/150)
## 16 网格项目的对齐方式
CSS的 [盒模型对齐模块](https://drafts.csswg.org/css-align/) 补充了CSS网格的内容，网格项目可以按行或列的轴线方向实现多种对齐方式。
属性`justify-items` 和 `justify-self` 以行轴为参照对齐项目，属性`align-items` 和 `align-self` 以列轴为参照对齐项目。
属性`justify-items` 和 `align-items` 是网格容器的属性，并支持如下这些值：
- auto
- normal
- start
- end
- center
- stretch
- baseline
- first baseline
- last baseline
### 16.1 例39
```css
.grid {
grid-template-rows: 80px 80px;
grid-template-columns: 1fr 1fr;
grid-template-areas: "content content"
"content content";
}
.item { grid-area: content }
.grid {
justify-items: start
}
```
在行的轴线起点处对齐。
[演示程序](http://www.42du.cn/run/151)
### 16.2 例40
```css
grid {
justify-items: center;
}
```
在行的轴线中点处对齐。
[演示程序](http://www.42du.cn/run/152)
### 16.3 例41
```css
grid {
justify-items: end;
}
```
在行的轴线终点处对齐。
[演示程序](http://www.42du.cn/run/153)
### 16.4 例42
```css
grid {
justify-items: stretch;
}
```
在行的轴线方向延伸并填满整个区域。`stretch`是缺省值。
[演示程序](http://www.42du.cn/run/154)
### 16.5 例43
```css
grid {
align-items: start;
}
```
在列的轴线起点处对齐。
[演示程序](http://www.42du.cn/run/155)
### 16.6 例44
```css
grid {
align-items: center;
}
```
在列的轴线中点处对齐。
[演示程序](http://www.42du.cn/run/156)
### 16.7 例45
```css
grid {
align-items: end;
}
```
在列的轴线终点处对齐。
[演示程序](http://www.42du.cn/run/157)
### 16.8 例46
```css
grid {
align-items: stretch;
}
```
在列的轴线方向延伸并填满整个区域。
[演示程序](http://www.42du.cn/run/158)
### 16.9 例47
```css
grid {
justify-items: center;
align-items: center;
}
```
项目定位于行轴和列轴线的中间位置。
[演示程序](http://www.42du.cn/run/159)
## 17 网格项目的对齐方式2
项目可以用属性align-self 和 justify-self定义自己的对齐方式，并支持如下这些属性值：
- auto
- normal
- start
- end
- center
- stretch
- baseline
- first baseline
- last baseline
### 17.1 例48
```css
.item1 { justify-self: start }
.item2 { justify-self: center }
.item3 { justify-self: end }
```
属性`justify-self` 在行的轴线方向定义对齐方式。
[演示程序](http://www.42du.cn/run/160)
### 17.2 例49
```css
.item1 { align-self: start }
.item2 { align-self: center }
.item3 { align-self: end }
```
属性`align-self` 在列的轴线方向定义对齐方式。
[演示程序](http://www.42du.cn/run/161)
### 17.3 例50
```css
.item1 {
justify-self: center
align-self: center
}
```
项目1定位在行的轴线和列的轴线的中间位置。
[演示程序](http://www.42du.cn/run/162)
## 18 网格轨道的对齐方式
在网格容器中，网格轨道延轴线方向有多种对齐方式。
属性`align-content`用于定义网格轨道延着行的轴线的对齐方式，而属性`justify-content`用于定义网格轨道沿着列的轴线的对齐方式。并分别支持如下属性：
- normal
- start
- end
- center
- stretch
- space-around
- space-between
- space-evenly
- baseline
- first baseline
- last baseline
### 18.1 例51
```css
.grid {
width: 100%;
height: 300px;
grid-template-columns: repeat(4, 45px);
grid-template-rows: repeat(4, 45px);
grid-gap: 0.5em;
justify-content: start;
}
```
列的轨道在行的轴线起点处对齐。`start` 是缺省值。
[演示程序](http://www.42du.cn/run/163)
### 18.2 例52
```css
.grid {
justify-content: end;
}
```
列的轨道在行的轴线终点处对齐。
[演示程序](http://www.42du.cn/run/164)
### 18.3 例53
```css
.grid {
justify-content: center;
}
```
列的轨道在行的轴线中间处对齐。
[演示程序](http://www.42du.cn/run/165)
### 18.4 例54
```css
.grid {
justify-content: space-around;
}
```
在每一列的两侧平均分配额外空间。
[演示程序](http://www.42du.cn/run/166)
### 18.5 例55
```css
.grid {
justify-content: space-between;
}
```
在列与列之间平均分配额外的空间。
[演示程序](http://www.42du.cn/run/167)
### 18.6 例56
```css
.grid {
justify-content: space-evenly;
}
```
在列与列之间及列与边界之间平均分配额外空间。
[演示程序](http://www.42du.cn/run/168)
### 18.7 例57
```css
.grid {
align-content: start;
}
```
行的轨道在列的轴线起点处对齐，属性`start`是缺省值。
[演示程序](http://www.42du.cn/run/169)
### 18.8 例58
```css
.grid {
align-content: end;
}
```
行的轨道在列的轴线终点处对齐。
[演示程序](http://www.42du.cn/run/170)
### 18.9 例59
```css
.grid {
align-content: center;
}
```
行的轨道在列的轴线中点处对齐。
[演示程序](http://www.42du.cn/run/171)
### 18.10 例60
```css
.grid {
align-content: space-around;
}
```
每一行的两侧平均分配额外空间。
[演示程序](http://www.42du.cn/run/172)
### 18.11 例61
```css
.grid {
align-content: space-between;
}
```
在行与行之间平均分配额外空间。
[演示程序](http://www.42du.cn/run/173)
### 18.12 例62
```css
.grid {
align-content: space-evenly;
}
```
在行与行之间及行与边界之间平均分配额外空间。
[演示程序](http://www.42du.cn/run/174)
## 结语
本教程相对全面地介绍了网格的相关内容，但这并不是一个完整的技术文档。想更全面的学习相关内容，推荐访问 [Mozilla开发者网络](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) 和 [W3C](https://www.w3.org/TR/css3-grid-layout/) 的网格文档。
由于能力有限，翻译中难免错误较多，还请大家多多谅解！
十分感谢原文作者[Jonathan Suh](https://twitter.com/jonsuh)在本文排版设计，示例制作，文字编辑等方面卓越的工作。
为了获得最佳的阅体验，请访问如下排版的教程：
[学习CSS网格](http://topic.42du.cn/grid)
[英文原版](https://learncssgrid.com/)
html图片文字 网格布局,【图片版】CSS网格布局（Grid）完全教程相关推荐
- ps批量修改名片文字_怎么修改图片上的文字 修改图片文字比如名片图片上面的地址需要修改下...
现在在网络上下载的图片是不是都对有文字水印的咧是不,那么怎么修改图片上的文字呢,修改图片文字比如名片图片上面的地址需要修改下这些怎么完成?OK ,今天就让小编来给大伙科普一下,其实要做到真正的无痕迹修 ...
- 修改Textview内图片文字间距和图片大小
平常我们的 图片文字结合如图: 对于上面的这种布局,我们一般采用的一个ViewGroup嵌入一个ImageView和一个TextView.如下所示: <LinearLayoutandroid:i ...
- android textview设置图片大小,修改Textview内图片文字间距和图片大小
1-1 布局 对于上面的这种布局,我们一般采用的一个ViewGroup嵌入一个ImageView和一个TextView.如下所示: android:id="@+id/layout_quest ...
- 互联网图片文字识别 互联网图片识别 彩信识别 彩信图片文字识别
"源于清华 服务全球"的国内顶尖OCR图文识别技术,针对视频文件里面的文字字符以及复杂背景图片的文字字符进行计算识别! 摘要:通过对视频文件里的字幕提取,达到视频文件的分类归档 ...
- html九宫格布局原理,了解CSS九宫格布局的几大实现方法
九宫格布局在制作一些Web App时还是经常可以用到的,本篇文章带大家了解一下CSS九宫格布局的几大实现方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 前提说明 除非特别说明, ...
- html footer 布局,详解CSS经典布局之Sticky footer布局
何为Sticky footer布局? 我们常见的网页布局方式一般分为header(页头)部分,content(内容区)部分和footer(页脚)部分.当页头区和内容区的内容较少时,页脚区不是随着内容区 ...
- python 网格策略_Python版简单网格策略
Python版简单网格策略 策略广场上的Python策略不多,这里编写了一个Python版本的网格策略.策略原理十分简单,在一个价格区间内固定价格距离产生一系列的网格节点,当行情变化时,价格到达一个网 ...
- 平分布局 html,实现CSS平分布局的4种方式
实现CSS等分布局的4种方式 前面的话 等分布局是指子元素平均分配父元素宽度的布局方式,本文将介绍实现等分布局的4种方式 思路一: float 缺点:结构和样式存在耦合性,IE7-浏览器下对宽度百分比 ...
- 【日常折腾】Python识别图片文字并对图片改名
1.前言 接到一个任务,将图片格式的专利的命名改为专利名称,效果如下. 2. 前期准备 安装openCV以及tesseract插件,tesseract插件需要设置为中文,推荐直接在PyCharm平台使 ...
- pytorch 解决图片文字识别, 输入图片的代码
为了使用 PyTorch 解决图像文字识别问题,首先需要导入 PyTorch 相关的库和加载模型. 具体代码如下: import torch import torchvision.transforms ...
最新文章
- TinyMCE的使用-安装
- 尚育鹏：Leetcode刷题总结（数组）
- iphone降级_iOS 14升级体验与问题总结，附降级教程
- AI = “Automated Inspiration(灵感自动化)”
- log4net简介(三)之无法写入日志
- 嵌入式开发中，用C++真香！
- 蜕变！网易轻舟微服务这波操作，始于异构融合、源于中台！
- Base64编码详解及其变种(解决加号在URL变空格问题）
- 如何获取html输入框的值,jQuery如何获取各种input输入框的值
- （转载）MyEclipse 9.1配置ADT(Link方式配置Android开发环境)
- 解决actionBar 闪现
- 思翼FM30高频头蓝牙数传连接地面站远距离通信功能
- 基础架构即服务(iaas)_基础架构即服务
- jquery ligerui php,jQuery LigerUI操作表格
- 根据父母身高预测儿子的身高
- vi 的完整指令说明 -- YenYen 整理
- HTML5文件夹隐藏了怎么打开,win10怎么打开隐藏文件夹
- bluedroid源码分析之ACL包发送和接收（二）
- 运算电路的频率响应与冲激响应
- VUE项目初始化报[404 Not Found - GET https://r.cnpmjs.org/xxxx]