grid布局—让css变得更简单
一、启用网格:display:grid;
通过将属性display
的值设为grid
,使 HTML 元素变为网格容器。在 CSS 网格中,父元素称为容器(container),它的子元素称为项(items)。
二、设置列数:grid-template-columns
grid-template-columns属性值的个数表示网格的列数,而每个值表示对应列的宽度。
三、设置行数:grid-template-rows
行数属性值的个数表示网格的行数,每个值表示对应行的高度。
下面是一个3列2行,每列100px,每行50px;的container容器
<style>
.d1{background:LightSkyBlue;}
.d2{background:LightSalmon;}
.d3{background:PaleTurquoise;}
.d4{background:LightPink;}
.d5{background:PaleGreen;}
.container {
font-size: 40px;
width: 100%;
background: LightGray;
display: grid;
/* 下面代码表示将网格分为3列,每列宽度100px */
grid-template-columns:100px 100px 100px;
/* 下面代码表示将网格分为2行,每行高度50px */
grid-template-rows:50px 50px;
}
</style>
<div class="container">
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
<div class="d4">4</div>
<div class="d5">5</div>
</div>
效果如下:
四、CSS 网格单位
在 CSS 网格中,可以使用绝对定位和相对定位单位如px和em来确定行或列的大小。
fr
:设置列或行占剩余空间的一个比例,
auto
:设置列宽或行高自动等于它的内容的宽度或高度,
%
:将列或行调整为它的容器宽度或高度的百分比,
<style>
.d1{background:LightSkyBlue;}
.d2{background:LightSalmon;}
.d3{background:PaleTurquoise;}
.d4{background:LightPink;}
.d5{background:PaleGreen;}
.container {
font-size: 40px;
width: 100%;
background: LightGray;
display: grid;
/*下面代码为将容器分为3列,第二列为100px,剩下的按比例分为3份,第一列占1份,第三列占2份*/
grid-template-columns: 1fr 100px 2fr;
/*将容器分为2行,每一行高度50px*/
grid-template-rows: 50px 50px;
}
</style>
<div class="container">
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
<div class="d4">4</div>
<div class="d5">5</div>
</div>
效果如下:
五、创建多列之间的间距:grid-column-gap
<style>
.d1{background:LightSkyBlue;}
.d2{background:LightSalmon;}
.d3{background:PaleTurquoise;}
.d4{background:LightPink;}
.d5{background:PaleGreen;}
.container {
font-size: 40px;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
/* 多列之间的间距为10px */
grid-column-gap: 10px;
}
</style>
<div class="container">
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
<div class="d4">4</div>
<div class="d5">5</div>
</div>
效果如下:
六、创建多列之间的间距:grid-row-gap
<style>
.d1{background:LightSkyBlue;}
.d2{background:LightSalmon;}
.d3{background:PaleTurquoise;}
.d4{background:LightPink;}
.d5{background:PaleGreen;}
.container {
font-size: 40px;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
/* 设置多行的间距为10px */
grid-row-gap:10px;
}
</style>
<div class="container">
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
<div class="d4">4</div>
<div class="d5">5</div>
</div>
效果如下:
七、grid-gap快速设置行与列的间隙
grid-gap是grid-row-gap和grid-column-gap的简写,它更方便使用。如果grid-gap有一个值,行与行之间和列与列之间将添加等于该值的间隙。但是,如果有两个值,第一个值将作为行间隙的高度值,第二个值是列间隙的宽度值。
<style>
.d1{background:LightSkyBlue;}
.d2{background:LightSalmon;}
.d3{background:PaleTurquoise;}
.d4{background:LightPink;}
.d5{background:PaleGreen;}
.container {
font-size: 40px;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
/* 在行之间添加10px的间隙,在列之间添加20px的间隙 */
grid-gap:10px 20px;
}
</style>
<div class="container">
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
<div class="d4">4</div>
<div class="d5">5</div>
</div>
效果如下:
八、线(lines)
网格的假想水平线和垂直线被称为线(lines)。这些线在网格的左上角从 1 开始编号,垂直线向右、水平线向下累加计数。 这是一个 3x3 网格的线条:
九、grid-column属性
grid-column
属性是第一个用于网格项本身的属性。使用用grid-column
属性定义网格项开始和结束的位置,进而控制每个网格项占用的列数。如下
grid-column: 2 / 4;
这会让网格项从左侧第二条线
开始到第四条线
结束,占用两列。
<style>
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5 {
background: PaleGreen;
/* 使类为item5的网格项占用网格的最后两列。 */
grid-column: 2 / 4;
}
.container {
font-size: 40px;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
效果如下:
十、grid-row属性
grid-row
:可以用grid-row属性来确定开始和结束的水平线。
grid-row: 2 / 4;
:这会让网格项从上方第二条线开始到第四条线结束,占用两行。
<style>
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5 {
background: PaleGreen;
grid-column: 2 / 4;
/* 使类为item5的元素占用最后两行。 */
grid-row: 2 / 4;
}
.container {
font-size: 40px;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
效果如下:
十一、 justify-self 水平对齐
在 CSS 网格中,每个网格项的内容分别位于被称为单元格(cell)的框内。你可以使用网格项的justify-self
属性,设置其内容的位置在单元格内沿行轴对齐的方式。默认情况下,这个属性的值是stretch
,这将使内容占满整个单元格的宽度。该 CSS 网格属性也可以使用其他的值:
start
:使内容在单元格左侧对齐,
center
:使内容在单元格居中对齐,
end
:使内容在单元格右侧对齐.
<style>
.item1{background: LightSkyBlue;}
.item2 {
background: LightSalmon;
/* 使用justify-self属性让类为item2的网格项居中。 */
justify-self:center;
}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5{background:PaleGreen;}
.container {
font-size: 40px;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
效果如下:
十二、align-self 垂直对齐
使用align-self属性,设置内容在单元格内垂直对齐方式。默认情况下,这个属性的值是stretch
,这将使内容占满整个单元格的高度。
start
:使内容在单元格顶部对齐,
center
:使内容在单元格垂直对齐,
end
:使内容在单元格底部对齐.
<style>
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3 {
background: PaleTurquoise;
/* 值为end使类为item3的网格项底端对齐 */
align-self:end;
}
.item4{background:LightPink;}
.item5{background:PaleGreen;}
.container {
font-size: 40px;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
十三、justify-items水平对齐所有项目
对网格容器使用justify-items
使它们一次性沿行轴对齐,它将使网格中所有的网格项按所设置的方式对齐。默认情况下,这个属性的值是stretch
,这将使所有网格内容占满整个单元格的宽度。
start
:使所有网格延行轴左侧对齐,
center
:使所有网格延行轴居中对齐,
end
:使所有网格延行轴右侧对齐.
使用justify-itemss
<style>
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5{background:PaleGreen;}
.container {
font-size: 40px;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
/* justify-items水平对齐所有子项目 */
justify-items:center;
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
十四、align-items 垂直对齐所有项目
对网格容器使用align-items
属性可以给网格中所有的网格项设置沿列轴对齐的方式。默认情况下,这个属性的值是stretch
,这将使所有占满整个单元格的高度。
start
:将所有内容对齐到网格区域(grid area)的顶部,
center
:将所有内容对齐到网格区域(grid area)的中间(垂直居中),
end
:将所有内容对齐到网格区域(grid area)的底部.
<style>
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5{background:PaleGreen;}
.container {
font-size: 40px;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
/* 让所有网格列轴末尾对齐。 */
align-items:end;
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
效果如下
十五、 区域(area)——grid-template-areas
可以通过给容器加上grid-template-areas
来实现,将网格中的一些网格单元格组合成一个区域(area),并为该区域指定一个自定义名称。
例如:下面的代码将顶部三个单元格合并成一个名为header
的区域,将底部三个单元格合并为一个名为footer
的区域,并在中间行生成两个区域————advert
和content
。
grid-template-areas:
"header header header"
"advert content content"
"footer footer footer";
注意:
- 在代码中,
每个单词
代表一个网格单元格
,每对引号
代表一行
。 - 除了自定义标签,你还能使用句点(.)来表示一个空单元格
十六、 grid-area属性设置元素在命名区域中的位置
如下:使用grid-area属性,把类为item5元素放到container容器中的footer区域
<style>
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5 {
background: PaleGreen;
/*使用grid-area属性,把类为item5元素放到footer区域*/
grid-area:footer;
}
.container {
font-size: 40px;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
grid-template-areas:
"header header header"
"advert content content"
"footer footer footer";
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
效果如下:
十七、 使用grid-area创建区域模板
除了使用grid-area
放置在模板中命名区域的位置的方式,如果网格中没有定义区域模板,你也通过grid-area创建区域模板,写法如下:
grid-area
: 起始水平线 / 起始垂直线 / 末尾水平线 / 终止垂直线 ;
item1 { grid-area: 1/1/2/4; }
:网格项将占用第 1 条和第 2 条水平线之间的行及第 1 条和第 4 条垂直线之间的列。
下面是:
用grid-area
属性将类为item5
的元素放置在第 3 条和第 4 条水平线及第 1 条和第 4 条垂直线之间的区域内
<style>
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5 {
background: PaleGreen;
/* 用grid-area属性将类为item5的元素放置在第 3 条和第 4 条水平线及第 1 条和第 4 条垂直线之间的区域内。*/
grid-area:3/1/4/4;
}
.container {
font-size: 40px;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
十八、使用 repeat 函数减少重复
当使用grid-template-columns
和grid-template-rows
定义网格结构时,你需要为添加的每一行和每一列都输入一个值。有一种更好的方法——使用repeat方法
指定行或列的重复次数,后面加上逗号以及需要重复的值。
写法如下:
grid-template-rows: repeat(100, 50px);
:该行代表有一个添加 100 行网格的例子,使每行高度均为 50px:
示例:
用repeat
代替grid-template-columns
属性的值中的重复代码。
<style>
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5{background:PaleGreen;}
.container {
font-size: 40px;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
/* grid-template-columns: 1fr 1fr 1fr; */
/* 使用repeat方法代替上面注释掉的代码 */
grid-template-columns:repeat(3,1fr);
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
效果如下:
十九、使用 minmax 函数限制项目大小
内置函数minmax
也可以可用于设置grid-template-columns
和grid-template-rows
的值。它的作用是在网格容器改变大小时限制网格项的大小。为此,你需要指定网格项允许的尺寸范围。
语法:
grid-template-columns: 100px minmax(50px, 200px);
:grid-template-columns被设置为添加两列,第一列 100px 宽,第二列宽度最小值是 50px,最大值是 200px。
示例:
minmax函数
替换repeat函数
中的1fr,限定其最小值为90px,最大值为1fr
<style>
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5{background:PaleGreen;}
.container {
font-size: 40px;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
/* minmax函数替换repeat函数中的1fr,限定其最小值为90px,最大值为1fr */
/* grid-template-columns:repeat(3,1fr); */
grid-template-columns: repeat(3, minmax(90px, 1fr));
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
效果如下:
二十、使用 auto-fill 创建弹性布局
repeat
方法带有一个名为自动填充(auto-fill
)的功能
grid-template-columns:repeat(auto-fill, minmax(60px, 1fr));
该代码的效果:列的宽度会随容器大小改变,在可以插入一个 60px 宽的列之前,当前行的所有列会一直拉伸
需要注意的是:
如果容器无法使所有网格项放在同一行,余下的网格项将移至新的一行。
用法示例:
在第一个网格中,用auto-fill和repeat来填充网格,其中列宽的最小值为60px,最大值为1fr。如下:
<style>
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5{background:PaleGreen;}
.container {
font-size: 40px;
min-height: 100px;
width: 100%;
background: LightGray;
display: grid;
/* 在第一个网格中,用auto-fill和repeat来填充网格,其中列宽的最小值为60px,最大值为1fr*/
grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
.container2 {
font-size: 40px;
min-height: 100px;
width: 100%;
background: Silver;
display: grid;
grid-template-columns: repeat(3, minmax(60px, 1fr));
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
<div class="container2">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
效果如下:
二十一、使用 auto-fit 创建弹性布局
auto-fit效果几乎和auto-fill一样。不同点仅在于,当容器的大小大于各网格项之和时,auto-fill将会持续地在一端放入空行或空列,这样就会使所有网格项挤到另一边;而auto-fit则不会在一端放入空行或空列,而是会将所有网格项拉伸至合适的大小。
注意:
如果容器无法使所有网格项放在同一行,余下的网格项将移至新的一行。
使用示例:
在类为container2
的网格中,用auto-fit
和repeat
来填充网格,其中列宽的最小值为60px,最大值为1fr。
<style>
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5{background:PaleGreen;}
.container {
font-size: 40px;
min-height: 100px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: repeat( auto-fill, minmax(60px, 1fr));
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
.container2 {
font-size: 40px;
min-height: 100px;
width: 100%;
background: Silver;
display: grid;
/*在类为```container2```的网格中,用```auto-fit```和```repeat```来填充网格,其中列宽的最小值为60px,最大值为1fr。 */
grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
<div class="container2">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
效果如下:
二十二、在网格中创建网格
将元素转换为网格只会影响其子代元素。因此,在把某个子代元素设置为网格后,就会得到一个嵌套的网格。
示例:
用display和grid-template-columns,使类为item3元素转换为有两列且宽度为auto和1fr的网格。
<style>
.item1 {
background: LightSkyBlue;
grid-area: header;
}
.item2 {
background: LightSalmon;
grid-area: advert;
}
.item3 {
background: PaleTurquoise;
grid-area: content;
/* 用display和grid-template-columns,使类为item3元素转换为有两列且宽度为auto和1fr的网格。*/
display:grid;
grid-template-columns:auto 1fr;
}
.item4 {
background: lightpink;
grid-area: footer;
}
.itemOne {
background: PaleGreen;
}
.itemTwo {
background: BlanchedAlmond;
}
.container {
font-size: 1.5em;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr auto;
grid-gap: 10px;
grid-template-areas:
"advert header"
"advert content"
"advert footer";
}
</style>
<div class="container">
<div class="item1">header</div>
<div class="item2">advert</div>
<div class="item3">
<div class="itemOne">paragraph1</div>
<div class="itemTwo">paragraph2</div>
</div>
<div class="item4">footer</div>
</div>
效果如下:
- linux下 Error running javac compiler
- 讨厌算法的程序员 1 - 插入排序
- Linux下使用ssh密钥实现无交互备份
- [编程经验] Python中的continue和break语句
- 洛谷 P3386 【模板】二分图匹配 Dinic版
- [编程经验] 拉勾网爬虫数据的后续处理
- Linux下使用rsync实现文件备份
- 【干货】基于TensorFlow卷积神经网络的短期股票预测
- [编程经验] 基于bs4的拉勾网AI相关工作爬虫实现
- [编程经验] 链家23个全国主要城市的现房数据分析
- [编程经验] Python中的modlue和packages的区别
- Day5上午解题报告
- [编程经验] Pandas中比较好用的几个方法
- [编程经验] Elasticsearch 初识
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- nginx被动检测
- Python获取股票历史数据
- 实习第四周
- 浅谈推进有赞全站 HTTPS 项目-工程篇
- Checks autowiring problems in a bean class问题解决
- 有赞权限系统
- python处理txt文件常用方法
- 修改springboot运行时命令行Banner
- 适应性页面自己的看法
- Vant 1.0 正式发布:轻量、可靠的移动端 Vue 组件库
- SAP CDS view单元测试框架Test Double介绍
- 漫谈 React 组件库开发(二):组件库最佳实践
- 搭建简易的物联网服务端和客户端-移动家庭能力平台【1】(二十三)
- 异步系统的两种测试方法
- 实习第五周