grid布局浏览器兼容_CSS Grid布局尝试

最新推荐文章于 2024-03-21 19:35:14 发布
最新推荐文章于 2024-03-21 19:35:14 发布
阅读量298 收藏 1
点赞数 1
文章标签： grid布局浏览器兼容
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42104947/article/details/112177371
版权

先看思维导图

9e7b35809c96cf79ea1f54d5f5647589.png

起步

首先搭好基本的结构

<div id="container">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
  <div class="item item-5">5</div>
  <div class="item item-6">6</div>
  <div class="item item-7">7</div>
  <div class="item item-8">8</div>
  <div class="item item-9">9</div>
  <div class="item item-10">10</div>
  <div class="item item-11">11</div>
  <div class="item item-12">12</div>
  <div class="item item-13">13</div>
  <div class="item item-14">14</div>
  <div class="item item-15">15</div>
  <div class="item item-16">16</div>
</div>

这里我觉得一个问题是，grid布局下面的所有元素都是同等的，实际中可能还存在层级的关系，直接使用略微有不满足语义化的缺陷，当然开发者是可以自己组建层级，然后再针对每个层级继续布局下去的 。

给每个项目设置样式以区分

.item {
  font-size: 1em;
  text-align: center;
}
.item-1 {
  background-color: #b71c1c;
}
.item-2 {
  background-color: #c2185b;
}
.item-3 {
  background-color: #8e24aa;
}
.item-4 {
  background-color: #651fff;
}
.item-5 {
  background-color: #1a237e;
}
.item-6 {
  background-color: #2196f3;
}
.item-7 {
  background-color: #039be5;
}
.item-8 {
  background-color: #18ffff;
}
.item-9 {
  background-color: #009688;
}
.item-10 {
  background-color: #00c853;
}
.item-11 {
  background-color: #b2ff59;
}
.item-12 {
  background-color: #eeff41;
}
.item-13 {
  background-color: #fbc02d;
}
.item-14 {
  background-color: #ff6f00;
}
.item-15 {
  background-color: #e65100;
}
.item-16 {
  background-color: #6d4c41;
}

然后开始了，先把容器设为display: grid

d5ec5063d407ec68d4b23c40662e8dfb.png

我们看到每个项独占一行，因为默认是块级元素，如果想变为行内，要设置display: inline-grid，厂商前缀自己按照浏览器加上，我使用的是Chrome，不需要。

5273678c14d18269b5376eee741ab719.png

这两个设置跟flex、inline-flex是相似的。

接下来就见真格了，以下先是设置网格布局容器上的属性。

grid-template-columns, grid-template-rows

可以看到如果不给每个项设置宽高就根本没法看，所以第一步要设置grid-template-columns和grid-template-rows。

数值

#container {
  display: grid;
  grid-template-columns: 100px 100px 100px 100px;
  grid-template-rows: 100px 100px 100px 100px;
}

0d257fa2f9d1620284fe8d746b77e4e9.png

也可以使用百分比

#container {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 100px 100px 100px 100px;
}

ba397e2c0e14a1078bc037629c787faa.png

看看如果设置的配置和实际元素数量不一致会怎么办

#container {
  display: grid;
  grid-template-columns: 25% 25% 25%;
  grid-template-rows: 100px 100px 100px;
}

c3b95aa70a331fbea8a155c01001bd73.png

如果是

#container {
  display: grid;
  grid-template-columns: 25% 25%;
  grid-template-rows: 100px 100px 100px;
}

7d9a5f17709bfe2c2cab53b09ae0d218.png

如果是

#container {
  display: grid;
  grid-template-columns: 25% 55%;
  grid-template-rows: 50px 100px 200px;
}

839daaac2dd0bf220d7b3e17350bf037.png

如果把方向从row变为column

#container {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 25% 25%;
  grid-template-rows: 100px 100px 100px;
}

6ce619a55b51e3d85d99578eb1045175.png

可以得出结论就是前面row * col个元素是遵循设置内容，然后按照排列次序以及排列方向，延续row或者column的设置值。

repeat()

这个函数为懒人设置，表示重复多少次

#container {
  display: grid;
  grid-template-columns: repeat(3, 25%) 100px;
  grid-template-rows: repeat(2, 100px) repeat(2, 150px);
}

689d3685eeeb48ccefd57d0477990cea.png

repeat()里第二个参数还能指定多个项

#container {
  display: grid;
  grid-template-columns: repeat(2, 15% 25%);
  grid-template-rows: repeat(2, 100px 150px);
}

3340d81a895fed8a3bdfa3bc69a712ac.png

第一个值也可以不指定具体的数字，而用auto-fill表示尽量排下去，有点float的味道，此时不能确定另一个维度的设置会用到几个。

#container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: 50px 100px 150px 200px 250px; /*不知道可能用到几个 */
}

c2f28c4235f061b157d1f06f3d59c8c2.png

此时我把浏览器拉宽，排下来只有三行了，就只会用到grid-template-rows里的三项值。

cfb83c84e8923d7baf049a7b0ad33547.png

fr

这个关键字就相当于flex布局里的flex-grow，表示各元素之间的比例。

#container {
  display: grid;
  grid-template-columns: 1fr 2fr 3fr 4fr;
  grid-template-rows: 50px 100px 150px 200px;
}

b8df811aaae21c432e6c490df2250c99.png

配合绝对数值也是和flex里一样的

#container {
  display: grid;
  grid-template-columns: 1fr 2fr 3fr 100px;
  grid-template-rows: 50px 100px 150px 200px;
}

374436334562e0b828711a2ba9f2ea0a.png

minmax()

这个函数就类比于设置min-width和max-width。下面我设置了个特殊情况，就是最小值要比最大值还来的大。

#container {
  display: grid;
  grid-template-columns: 1fr 1fr minmax(500px, 1fr) 1fr;
  grid-template-rows: 50px 100px 150px 200px;
}

此时500px是大于1fr的，我们看到

cdd9bac897b0251fd0ab9fb5b3118098.png

说明此时布局系统优先满足最小值的设定。

auto

auto关键词表示接盘，它就是一个接盘侠——把剩下的空间都分给我。

#container {
  display: grid;
  grid-template-columns: 1fr 1fr auto 1fr;
  grid-template-rows: 50px 100px 150px 200px;
}

346e2e6bd6fcc39c73d2db072a32e581.png 
#container {
  display: grid;
  grid-template-columns: 100px 100px auto auto;
  grid-template-rows: 50px 100px 150px 200px;
}

363360aace4c08d94991e4eba632dab6.png

网格线名称

在这里还能指定网格线的名称，但此时还排不上用场，注意实际的网格线数要+1，四个格子就要有五根线。

#container {
  display: grid;
  grid-template-columns: [no1] 100px [no2] 100px [no3] 100px [no4] 100px [no5];
  grid-template-rows: 50px 100px 150px 200px;
}

grid-row-gap，grid-column-gap，grid-gap

它们用来设置网格之间的间隙，一般在网格布局中都会有这项设置，下图是antd的网格组件

5b3a762fb70364a631c8bdf213680d75.png 
#container {
  display: grid;
  grid-template-columns: 100px 100px 100px 100px;
  grid-template-rows: 100px 100px 100px 100px;
  grid-row-gap: 20px;
  grid-column-gap: 10px;
  /* 或者
    grid-gap: 20px 10px;
    */
}

26bf16d152dec89936a574d12307c5d8.png

grid-template-areas

这个属性和刚才指定网格线类似，它是给区块指定名字，比如

#container {
  display: grid;
  grid-template-columns: 100px 100px 100px 100px;
  grid-template-rows: 100px 100px 100px 100px;
  grid-template-areas:
    "caocao caocao zhaoyun machao"
    "caocao caocao zhaoyun machao"
    "guanyu guanyu zhangfei zhangfei";
}

如果某个区块不需要名字，可以指定.。

注意设置了区域名字后，区域两边的线会被自动命名，比如caocao的起始位置的水平网格线和垂直网格线叫做caocao-start，终止位置的水平网格线和垂直网格线叫做caocao-end。

grid-auto-flow

这个属性用来指定网格是先横向排列还是先纵向排列，跟flex布局里的flex-direction类似。

#container {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 100px 100px 100px 100px;
  grid-template-rows: 100px 100px 100px 100px;
}

c61ea934721a1766f77edd67508e3405.png

这个属性上还能设置dense，要用一个具体的例子来说明这个属性的作用。

假设我们在1和2上设置宽度

 #container {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: 100px 100px 100px 100px;
  grid-template-rows: 100px 100px 100px 100px;
}

.item {
  font-size: 1em;
  text-align: center;
}

.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  background-color: #b71c1c;
}

.item-2 {
  grid-column-start: 1;
  grid-column-end: 3;
  background-color: #c2185b;
}

此时的效果是

5d297f958a616204e042356fedc1ed0a.png

由于区块2另起了一行，区块1的一行都被空着，如果设置

#container {
  display: grid;
  grid-auto-flow: row dense;
  grid-template-columns: 100px 100px 100px 100px;
  grid-template-rows: 100px 100px 100px 100px;
}

7800085d3c959f0706d7521b4ac15df6.png

没有比见缝插针这个词更适合当前的场景了。

justify-items，align-items，place-items

justify-items针对单元项里的内容的水平位置，align-items针对单元项里的内容的垂直位置，它们都能取如下的值

  • start
  • end
  • center
  • stretch

设置成end看看效果

#container {
  display: grid;
  justify-items: end;
  grid-template-columns: 100px 100px 100px 100px;
  grid-template-rows: 100px 100px 100px 100px;
}

be8c6d2b61e097f6c15fd826317cfa5b.png

place-items就是justify-items和align-items的组合。

justify-content, align-content, place-content

justify-content是单元项在容器里的水平位置，align-content是单元项在容器里的垂直位置，它们可以取如下的值

  • start
  • end
  • center
  • stretch
  • space-around
  • space-between
  • space-evenly

让人想起了flex布局。

也试两个看看

#container {
  display: grid;
  justify-content: space-around;
  grid-template-columns: 100px 100px 100px 100px;
  grid-template-rows: 100px 100px 100px 100px;
}

dd11c9cdadd1ec773d64b81b33a9d6b3.png

改成end

627d9e7b6a2db4406dd931e4388334a6.png

同理place-content也是justify-content和align-content的组合。

grid-auto-columns，grid-auto-rows

它们用来指定超出范围的那些单元项的设置，之前我们已经试过超出设置范围的单元项是什么样子的，用这两个配置能对它们多一层控制，比如

#container {
  display: grid;
  grid-template-columns: 25% 25% 25%;
  grid-template-rows: 100px 100px 100px;
  grid-auto-rows: 50px;
}

超出3 * 3 = 9个范围之后，多出来的单元项，将它们的高度设置为50px，可以将下图和上面的例子对比一下。

53eb0bcace01c9669e0493c0150b2ee6.png

对于那些设置了位置，使之不在grid-template-columns和grid-template-rows范围之内的单元项(比如设置grid-column-start、grid-column-end)，也被这两个配置影响。

grid-template, grid

跟flex一样，这两个也是合并的设置，反正我是记不住的

grid-template= grid-template-column + grid-template-rows + grid-template-areas

grid = grid-template-rows + grid-template-columns + grid-template-ares + grid-auto-rows + grid-auto-columns + grid-auto-flow

以下属性设置在单元项上

grid-column-start, grid-column-end, grid-row-start , grid-row-end, grid-column, grid-row

它们用来设置行的起点、终点和列的起点、终点，注意CSS里的起点都是以1开始的。

修改第一个单元项

.item-1 {
  background-color: #b71c1c;
  grid-column-start: 2;
  grid-column-end: 5;
}

89ca0f3df54d4466f848ecb910e78d29.png

针对这第一个单元项，还能再狠一点

.item-1 {
  background-color: #b71c1c;
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 4;
}

e8b1d61ba58ff71f0fb7c20fb278863c.png

可见是先把单元项1给排好，然后其他的依次按照grid-auto-flow的配置来排列。

另外刚才指定的网格线名称也能在这里使用了。

.item-1 {
  background-color: #b71c1c;
  grid-column-start: no2;
  grid-column-end: no5;
}

也能使用span来简单的指定跨越几个单元格。

.item-1 {
  background-color: #b71c1c;
  grid-column-start: span 2;
}

542a13007c3e678cd1a21eb043a2d1f6.png

或者

.item-1 {
  background-color: #b71c1c;
  grid-column-start: no2;
  grid-column-end: span 2;
}

3c61d83426e232cbaac4bc3ac9456572.png

grid-column和grid-row是以上的合并简写。比如

.item-1 {
  background-color: #b71c1c;
  grid-column: 1 / 3;
  /* 与以下相等
    grid-column-start: 1;
    grid-column-end: 3;
    */
  /* 与以下相等
    grid-column: 1 / span 2;
    */
}

grid-area

grid-area就会用到刚才指定的区块名字，比如刚才曾经指定

#container {
  display: grid;
  grid-template-columns: [no1] 100px [no2] 100px [no3] 100px [no4] 100px [no5];
  grid-template-rows: 100px 100px 100px 100px;
  grid-template-areas:
    "caocao caocao zhaoyun machao"
    "caocao caocao zhaoyun machao"
    "guanyu guanyu zhangfei zhangfei";
}

现在可以设置第一个区块为

.item-1 {
  background-color: #b71c1c;
  grid-area: caocao;
}

那最终第一个区块就占据了名字为caocao的区域

96a0e334ddebe49dac08e981517ffcae.png

当然也能用数字来指定

.item-1 {
  grid-area: 1 / 1 / 3 / 3;
}

justify-self, align-self, place-self

这几个跟flex布局里的align-self很相似，都是调整单元项在父级容器里的位置。

justify-self调整单元项在父级容器里的水平位置，align-self调整单元项在父级容器里的垂直位置，place-self理所当然是它们的合并方式，可以取如下的值

  • start
  • end
  • center
  • stretch

最后做一个综合的例子——华容道

b5ef253775e81fbe36e53b131ee15915.png

选用最傻瓜的方式——指定grid-area 

<!DOCTYPE html>
<html>
  <head>
    <title>华容道</title>
    <style>
      #container {
        display: grid;
        grid-template-columns: 100px 100px 100px 100px;
        grid-template-rows: 100px 100px 100px 100px 100px;
        grid-template-areas:
          "zhaoyun caocao caocao huangzhong"
          "zhaoyun caocao caocao huangzhong"
          "zu1 machao . zu2"
          "zu3 machao . zu4"
          "guanyu guanyu zhangfei zhangfei";
      }
      .item {
        font-size: 1em;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
      }

      .item-1 {
        background-color: #b71c1c;
        grid-area: zhaoyun;
      }
      .item-2 {
        background-color: #c2185b;
        grid-area: caocao;
      }
      .item-3 {
        background-color: #8e24aa;
        grid-area: huangzhong;
      }
      .item-4 {
        background-color: #651fff;
        grid-area: zu1;
      }
      .item-5 {
        background-color: #651fff;
        grid-area: zu2;
      }
      .item-6 {
        background-color: #009688;
        grid-area: zu3;
      }
      .item-7 {
        background-color: #00c853;
        grid-area: zu4;
      }
      .item-8 {
        background-color: #2196f3;
        grid-area: machao;
      }
      .item-9 {
        background-color: #546e7a;
        grid-area: guanyu;
      }
      .item-10 {
        background-color: #e65100;
        grid-area: zhangfei;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div class="item item-1">赵云</div>
      <div class="item item-2">曹操</div>
      <div class="item item-3">黄忠</div>
      <div class="item item-4">卒</div>
      <div class="item item-5">卒</div>
      <div class="item item-6">卒</div>
      <div class="item item-7">卒</div>
      <div class="item item-8">马超</div>
      <div class="item item-9">关羽</div>
      <div class="item item-10">张飞</div>
    </div>
  </body>
</html>
yilin wang
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS的grid布局
小蓝人的博客
07-27 1424
利用布局，兼容性好，但是效率低有自己的一套属性，效率高，学习成本低，兼容性强网格布局是最强大的css布局方案，但是知识点多，学习成本相对困难，目前的兼容性不如flex好。
关于grid布局
du_aitiantian的博客
12-20 2435
前端，面试，css，grid布局
CSS 详解grid布局（网格布局）与应用
zzylj的博客
03-21 1420
CSS 详解grid布局（网格布局）与应用
一文搞懂Grid 布局
weixin_64310738的博客
03-16 1662
一文搞懂Grid 布局
CSS网格布局
jwz934738949的博客
09-14 232
网格容器 display设置为grid时，网格按行排列，宽度自动占满整个屏幕 display设置为inline-grid时，网格按行排列，宽度为元素本身宽度 .box1 { display: grid; } .box2 { height: 50px; background-color: aquamarine; margin-bottom: 10px; } .box1 { display: inlin
前段笔记(一) grid布局在IE中的兼容问题
qq_57728310的博客
08-02 4832
最近在编写项目时遇到了一些兼容性的问题，因为头一次使用grid布局和flex布局进行IE兼容，在初期兼容时遇到了很让人头大的问题，好在最后解决，特意留个笔记. 在IE中，grid布局最多兼容至IE10，且不完全兼容，可用的兼容属性为： 定义grid容器:display:-ms-grid; 定义行数：-ms-grid-columns; 定义列数：-ms-grid-rows; 重复函数：（重复主体）重...
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
12-13
上一篇《CSS Grid布局教程之什么是网格布局》中简单介绍了什么是CSS Grid Layout以及一些概念和术语，为后续学习和使用CSS Grid Layout做了一些铺垫。但浏览器对CSS Grid Layout到目前为止各浏览器厂端支持程度不...
CSS Gird布局教程指南
12-13
CSS网格布局是一个二维的基于网格的布局系统, 其目的在于完全...网格是第一个专门为解决布局问题而创建的CSS模块 在浏览器兼容性方面,可以看一下caniuse的数据   网格容器 在元素中应用 display: grid 。这是所有网
css-guidebook::books: CSS 知识图谱 新特性、属性、布局、响应式、动画
05-24
CSS GuideBook 目录 基础概念 属性 布局 基础布局 内联块级布局 文档流布局 定位布局 浮动布局 ...弹性布局 表格布局 居中布局 ...多栏布局 ...浏览器兼容 CSS HAck 优质工具网站推荐 参考资料 关于 CSS 详细
plasma.css:一个基于Flexbox的健壮但极简CSS网格框架
05-11
等离子一个基于Flexbox的健壮但极简CSS网格框架。... X轴元素对齐是的Α :check_mark: Y轴元素对齐是的Α :check_mark:浏览器支持Flexbox Grid依赖于CSS属性flexbox。 请参阅 更多细节。发展安装依赖项npm i
vgrid:具有魔术媒体查询混合功能的可变SCSS网格系统
03-22
要使用随附的处理器，请在控制台中键入npm run compile ，以生成grid.css文件。 现在，您可以在浏览器中打开example/*.html文件，以查看运行中的网格。 要编译CSS并同时对其进行压缩，请使用npm run compress 。 ...
CSS进阶之grid网格布局 (三)：关于grid布局、grid-container属性、grid-items属性
Good Good Study,Day Day Up!
06-04 2653
css网格布局擅长于将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系（前提是 HTML 生成了这些区域）。像表格一样，网格布局让我们能够按行或列来对齐元素。然而在布局上，网格比表格更可能做到或更简单。例如，网格容器的子元素可以自己定位，以便它们像 CSS 定位的元素一样，真正的有重叠和层次。1. 将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局；2. Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。
detail网格不能正常显示的原因
weixin_37203411的博客
12-02 243
在父项网格里要加 frozen: false,
css Grid布局
前端的路上
03-18 399
基本概念 在学习grid布局之前，我们需要了解一些基本概念 1.容器和项目 采用网格布局的区域，称为“容器”。容器内部的采用网格定位的子元素称为“项目” <span>foo</span> <div class="wrapper"> <div class="item item-1">1</div> ...
grid布局浏览器兼容_Grid布局
weixin_42662293的博客
12-29 9509
grid布局是一种新的布局方案。传统布局使用浮动和定位，而grid布局可以像表格一样将页面容器分割成一块一块的区域，定义子元素的排布和位置。可以说是flex布局的升级版。借用大神旭哥的话：Grid布局就像是“分田种地”。故事是这样的，张老板是个程序员，省吃俭用攒了点小钱，然后老家因为城镇化建设，农村都没什么人，土地都荒废在那里，于是就承包了一块地，打算养养鱼，种种果树。承包的地方很挺大，如何划分土...
CSS Grid布局的使用
冰的博客
06-17 337
介绍之前，先了解一下该门技术的优缺点，看自己是否值得学习，优缺点如下：优点：CSS Grid布局是一种用于创建网页布局的强大工具。它引入了一个二维网格系统，可以以行和列的形式创建布局，提供了更灵活和精确的控制，并且减少了不必要的一些计算。缺点：兼容性问题：CSS Grid布局是在CSS3中引入的较新的特性，因此旧版本的浏览器可能不支持它或支持有限。
grid布局浏览器兼容_使用 CSS Grid：以兼容不支持栅格化布局的浏览器
weixin_39769183的博客
12-19 3105
摘要当使用任何 CSS 的新特性的时候，浏览器的兼容问题都必须去解决。与 Flexbox 和 CSS Grid 一样，在使用 CSS 新特性布局时，兼容性比性能增强更值得考虑。在这篇文章中，我将探索现今处理浏览器兼容问题的方法。为了让我们现在就用上 CSS 的新特性，我们可以做出哪些努力，仍然给那些不支持新特性的浏览器提供很好的体验？我们说的支持是什么？在阐明如何在去支持那些本身不支持网格的浏览器...
最强大的布局方案——网格Grid布局万字详解
热门推荐
郊眠寺
12-17 1万+
最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。移动端浏览器：*) 从上图我们可以看出第一列的宽度为150px，第二列和第三列以1：2的比例均分了剩余空间) 如上图所示，第三列的宽度最小不小于10px，最大不超过50px。
学习CSS Grid 网格布局（入门）
Mr_yq的博客
01-09 748
CSS Grid 布局据说很火。该布局系统规范最近获得了主流浏览器的支持，包括最新版本的 Firefox，Chrome，Opera，Safari和 Edge  介绍 CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格。 Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列。它还能使我们在不改变任何HTML的情况下，使用 CSS 来定位和调整网格内的
css grid布局 兼容性
最新发布
04-09
- 兼容性较好的浏览器：Chrome、Firefox、Safari、Edge、Opera等现代浏览器都支持CSS Grid布局，并且提供了较好的兼容性。 - 兼容性较差的浏览器：部分旧版浏览器如IE11及更早版本不支持CSS Grid布局，需要使用其他...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值