css布局器的性质和用法

最新推荐文章于 2024-04-11 11:27:52 发布
最新推荐文章于 2024-04-11 11:27:52 发布
阅读量181 收藏
点赞数
分类专栏： 前端 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49722641/article/details/108056562
版权

css的引入方式
四种 行内式 嵌入式 链接式 导入式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--方式2嵌入式：div为选择的标签，下面为属性名和属性值的键值对-->
    <style type="text/css">
        div{
            color: red;
            background-color: gray;
        }
    </style>

    <!--css引入方式3(推荐)链接式：直接引用css文件，href为css文件名-->
    <link type="text/css" rel="stylesheet" href="css.css">

    <!--css引入方式4导入式：直接引用css文件-->
    <style type="text/css">
        @import"css.css"; 此处要注意.css文件的路径
    </style>

    <!--导入式会在整个网页装载完后再装载CSS文件，-->
    <!--因此如果网页比较大则会出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。-->
    <!--使用链接式会在网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果。-->

</head>
<body>

    <!--css引入方式1行内式：直接写在标签内，键值对用分号隔开-->
    <p style="color: pink;background-color:cadetblue;">hello p</p>
    <!--css引入方式2嵌入式：在head中写style-->
    <div> hello div</div>

</body>
</html>

css选择器
选择器指明了{}中样式的作用对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--星号通用选择器，将所有标签统一操作-->
    <!--标签选择器，匹配所有使用p标签、div标签的元素-->
    <!--id选择器，匹配所有id属性等于p1的元素-->
    <!--class选择器，匹配所有class属性中包含c1的元素-->
    <style>
        *{
            font-size: 45px;
         }

        p{
            background-color: yellow;
        }

        div{
            color: darkgreen;
        }

        #p1{
            font-style: italic; 倾斜
        }

        .c1{
            background-color: paleturquoise;
        }
    </style>


    <!--多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔-->
    <!--后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔-->
    <!--子元素选择器，匹配所有E元素的子元素F,E>F -->
    <!--毗邻元素选择器，匹配所有紧随E元素之后的同级元素F,E + F -->
    <style>
        #p,#p1,.c6{
           color: saddlebrown;
        }
        #outer .c1 .c3{
           color: yellow;
        }
        #outer>.c1>.c3{
           font-size: 70px;
        }
        #outer+.t{
           color: red
        }
    </style>

    <!--嵌套规则：-->
    <!--块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，只能包含其它内联元素。-->
    <!--有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt-->
    <!--块级元素与块级元素并列、内联元素与内联元素并列。-->


    <!--属性选择器 可以不加E-->
    <!--E[att]匹配所有具有att属性的E元素，不考虑值。p[title] -->
    <!--E[att=val]匹配所有att属性等于“val”的E元素div[class=”error”]-->
    <!--E[att~=val]匹配所有att属性具有一个值等于“val”的E元素td[class~=”name”]-->
    <!--E[attr^=val]匹配属性值以指定值开头的每个元素div[class^="test"]-->
    <!--E[attr$=val]匹配属性值以指定值结尾的每个元素div[class$="test"] -->
    <!--E[attr*=val]匹配属性值中包含指定值的每个元素div[class*="test"]-->
        <style>

        [id]{
            color: yellow;
        }
        [al]{
            color: red
        }

       [class="div1"]{
           color: yellow;
       }

       [class~="div1"]{
           color: yellow;
       }

       [class^="d"]{
           color: yellow;
       }

       [class$="1"]{
           color: yellow;
       }

        [class*="d"]{
            background-color:yellow;
        }
    </style>


    <!--伪类选择器 : 伪类指的是标签的不同状态:-->
    <!--a:link（没有接触过的链接）a:hover（鼠标放在链接上的状态）-->
    <!--a:visited（访问过的链接）a:active（在链接上按下鼠标时的状态）-->
    <!--:before    p:before  在每个p元素之前插入内容-->
    <!--:after     p:after   在每个p元素之后插入内容-->
    <style>
        a:link{
            color: red;
        }
        a:hover{
            color: yellow;
        }
        a:visited{
            color: purple;
        }
        a:active{
            color: green;
        }
        #pk:after{
            content: "pp";
            color: green;
        }
        #pk:before{
            content: "pp";
        }
    </style>

</head>

<body>
    <p id="p"> p & id p </p>
    <div id="outer"> div & id outer
        <p id="p1"> div & id p1</p>
        <p class="c1">div & class c1</p>
        <div class="c1">
            <p class="c3">div & div & class c3</p>
        </div>
        <div class="t">
        div & div & class t
        </div>
    </div>
    <p class="t">p & class t</p>
    <p>p</p>
    <div class="c6">div & class c6</div>

    <div class="div1 div2" al="zz">div1</div>
    <p class="div1">ppp</p>
    <div class="div2">div2</div>
    <div class="div3">div3</div>
    <div id="id">iddd</div>

    <a href="http://www.baidu.com">百度</a>
    <p id="pk">hello p</p>

</body>
</html>

css优先级和继承
CSS优先级，指CSS样式在浏览器中被解析的先后顺序。样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：

  • 内联样式表的权值最高 style=" "
  • 2 统计选择符中的ID属性个数。 #id
  • 3 统计选择符中的CLASS属性个数。 .class
  • 4 统计选择符中的HTML标签名个数。 p

css属性
颜色属性 字体属性 背景属性 文本属性 边框属性 列表属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--颜色属性rgba(255,0,0,1);最后一个值代表透明度-->
    <!--字体属性font-weight;粗细-->
    <!--背景属性background-image 插入图片,默认repeat background-size是图片大小 可以直接用background设定,里面的100 100是位置-->
    <!--margin,从最左上开始显示背景,不留间隙-->
    <style>
        *{
            margin: 0;
           }

        p{
            color:rgb(269,0,0);
            color:rgba(255,0,0,0.5);
            color:#ffee33;
            color:green;

            font-weight: 100;
            font-family: "Times New Roman";
            font-style: italic;
            font-size: 45px;
        }

        #div1{
            height:300px;
            width:300px;
            background-color: rebeccapurple;
            background-image: url("12.jpg");
            background-repeat: no-repeat;
            background-size: 100px 100px;
            background-position: left center;
            background: url("12.jpg") no-repeat 100px 100px rebeccapurple;
            }
    </style>

    <!--文本属性-->
    <!--text-align字体居中line-height 设置行高 letter-spacing 字母间的像素 text-transform 标题形式-->
    <!--边框属性 word-spacing: 0px 有一段默认的距离，要想紧挨，可以设置成为负数-5px。边框风格颜色和宽度 -->
    <!--列表属性 upper-alpha 标用大写字母 decimal-leading-zero 01.02.03 circle 圈 none 无特殊符号 disc 实心点-->
    <style>
        #ss{
            background-color: #cc3399;
            text-align: center;
            line-height: 100px;
            letter-spacing: 5px;
            word-spacing: 5px;
            text-transform: capitalize;
        }
        .im{
            border: solid 3px green;
            word-spacing: 0px;
            border-style: solid;
            border-color: green;
            border-width: 2px;
        }
        ul{
            list-style:none;
        }
    </style>

</head>

<body>
    <p>pp</p>
    <div id="div1"></div>
    <p id="ss">hello p sj lf dk lks jl; ks daf</p>
    <div class="im">
          <img src="12.jpg">
          <img src="1.jpg">
    </div>

    <ul>
        <li>111</li>
        <li>111</li>
        <li>111</li>
    </ul>

</body>
</html>

dispaly属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <!--display:none 不显示 block显示为块级标签inline显示内联标签inline-block行内显示块-->
    <style>
        img{
            display:none;
            display: block;
        }
        #div1{
            height: 100px;
            background-color: rebeccapurple;
            display: inline;
        }
        span{
            display: inline-block;
            height: 100px;
            width: 100px;
            background-color: red;
        }
        #outer{
            word-spacing: -5px;
        }
    </style>
</head>
<body>
    <!--<img src="12.jpg">22-->
    <!--<div id="div1">1</div>111-->

    <div id="outer">
        <span>span1</span>
        <span>span2</span>
    </div>

</body>
</html>

内边距和外边距
inline元素的margin和padding属性。水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
常见的块级元素有 div、form、table、p、pre、h1～h6、dl、ol、ul 等。
常见的内联元素有span、a、strong、em、label、input、select、textarea、img、br等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--内边距padding(通过加宽自己达到目的)和外边距margin body有默认的边距,也可以自己设置-->
    <style>
        body{
            margin: 0px;
            padding:2px;
            border:solid green 3px;
        }
        .div1{
            border: dashed 2px black;
            height: 200px;
            width: 30%;
            background-color: rebeccapurple;
        }
        .div2{
            margin: 10px;
            border: dashed 2px black;
            height: 200px;
            width:20%;
            background-color: green;
        }
        .div3{
            border: dashed 2px black;
            height: 50px;
            width: 20%;
            background-color:red;
        }
    </style>
</head>

<body>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
    <div class="div3">div3</div>
</body>
</html>

练习
300px300px的盒子装着100px100px的盒子，分别通过margin和padding设置将小盒子 移到大盒子的中间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0px;
        }

        .div1{
            background-color: aqua;
            width: 300px;
            height: 300px;
            border: 1px solid green;
            padding-left: 200px;
            padding-top: 200px;
        }
        .div2{
            background-color: blueviolet;
            width: 100px;
            height: 100px;
            <!--第二种方法：margin: 100px;-->
        }
    </style>
</head>
<body>
       <div class="div1">
           <div class="div2"></div>
       </div>
</body>
</html>

文档流，是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。
脱离文档流，是将元素从普通的布局排版中拿走，在定位的时候，会当做脱离文档流的元素不存在而进行定位。

只有绝对定位position(完全脱离)的absolute和fixed和浮动float(非完全脱离)才会脱离文档流。
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
当初float被设计的时候就是用来完成文本环绕的效果，所以文本不会被挡住，这是float的特性，即float是一种不彻底的脱离文档流方式。
清除浮动：clear
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象
但是需要注意的是：clear属性只会对自身起作用，而不会影响其他元素。如果一个元素的右侧有一浮动对象，而这个元素设置了不允许右边有浮动对象，即clear：right，则这个元素会自动下移一格，达到本元素右边没有浮动对象的目的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--float：left标签 若上一个标签无float，则有float的放到到它下面，若有，则到其右后。-->
    <!--right向右飘，后面无float的顶上来-->
    <!--clear表示如果元素特定位置有浮动，则自己换到下一行-->
    <style>
        .div1{
            background: rebeccapurple;
            width: 100px;
            height: 100px;
            float: left;
        }
        .div2{
            background: green;
            width: 100px;
            height: 100px;
            float:right;
        }
        .div3{
            background: yellow;
            width: 200px;
            height: 200px;
            clear: both;
        }


        .outer{
            background-color: rebeccapurple;
            <!--overflow: hidden;-->

        }
        .menu1{
            width: 100px;
            height: 50px;
            color: gold;
            float: left;
            background-color: brown;
        }
        .menu2{
            width: 100px;
            height: 50px;
            color: gold;
            float: right;
            background-color: #C0C0C0;
        }
        .bottom{
            text-align: center;
            background-color: #cc3399;
        }

        .clear{
            clear: both;
        }
    </style>
</head>

<body>
    <!--<div class="div1">111</div>-->
    <!--<div class="div2">222</div>-->
    <!--<div class="div3">333</div>-->

    <!--div中两个div都浮起来，所以里面没东西，如果不加clear，下一个div会顶上。或者使用outer里的overflow: hidden;-->
    <div class="outer">
        <div class="menu1">菜单一</div>
        <div class="menu2">菜单二</div>
        <div class="clear"></div>
    </div>
    <div class="bottom">底部</div>

</body>
</html>

position
static 无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。
fixed对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--fixed固定位置在某个地方-->
    <style>
        .div1{
            height: 1500px;
            background-color: #cc3399;
        }

        .div2{
            height: 1500px;
            background-color: aquamarine;
        }

        a{
            position: fixed;
            bottom: 200px;
            right: 200px;
        }
    </style>
</head>

<body>
    <!--position脱离文档流，所以a标签在哪里都可以-->
    <div class="div1">
        <a>返回顶部</a>
    </div>

    <div class="div2"></div>
</body>
</html>

relative
相对定位。相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。
absolute
绝对定位。设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即html元素）。
如果父级设置了position属性为非static，那么子元素就会以父级的左上角为原始点进行定位。对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
         .div1{
            background: rebeccapurple;
            width: 100px;
            height: 100px;
         }
         .div2{
            background: green;
            width: 100px;
            height: 100px;
            position: absolute;
            top: 100px;
            left: 100px;
            <!--absolute 若body和box2没有设置position为非static，则相对于html元素定位，如果设置了则以父亲节点为原点移动-->
            <!--position: relative;-->
         }
         .div3{
            background: yellow;
            width: 200px;
            height: 200px;
         }
        .box2{
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="div1">div1</div>
    <div class="box2">
        <div class="div2">div2</div>
    </div>
    <div class="div3">div3</div>
</body>
</html>
HiFerry
关注
专栏目录
swing设置组件分割线_Swing五种常见的布局器
weixin_39756235的博客
12-16 829
布局器是用在容器上的。 用来决定容器上的组件摆放的位置和大小步骤1:绝对定位步骤2:FlowLayout步骤3:BorderLayout步骤4:GridLayout步骤5:setPreferredSize步骤6:CardLayout示例 1 : 绝对定位绝对定位就是指不使用布局器，组件的位置和大小需要单独指定package gui; import javax.swing.JButton; im...
CSS——布局布局神器display:table-cell
ZJH_are的博客
07-07 740
用float来做布局触发的问题比较多，例如要清除浮动，元素浮动后还会导致该元素脱离文档流，即使你清除float，该元素依旧是脱离文档流。左右布局能用布局我就用它来布局，但是还是无法完全不使用它，很多布局例如需要靠左和靠右的布局场景下就没办法不去使用float来布局。 元素两端对齐第一个案例是让两个元素分别向左和向右对齐，如果是过去，我一定会用float来实现，但其实用table可以这么做： 自动平均划分每个小模块，使其一行显示 第二个案例我们先看看图：遇到上面这种布局，一般会用来做，或者把每个设置
Java 布局管理器
hitmengfanchao的博客
03-23 2071
在Java图形用户你界面中，布局管理器负责容器内组件的排列顺序、大小、位置，以及当窗口移动或调整后组件如何变化等。Java平台提供了7种布局管理器：FlowLayout、BorderLayout、GridLayout、BoxLayout、CardLayout、SpringLayout、GridBagLayout和SpringLayout。
组件属性与布局器
fenghome的专栏
06-25 894
组件属性：     组件大小：     组件内外边框边距：     组件字体属性：     组件内字体对齐方式：LinerLayout相关属性：     布局器属性：           内部组件水平或垂直：     组件属性：             缩放比例：                 所有的视图都有一个layout_weight值，默认为零，意思是需要显示 多大的视图就占据多大的屏幕空 间。若赋一个高于零的值，则将父视图中的可用空间分割，分割大小具体取决于每一个视图的layout_weight
GUI——容器和布局器
yooppa的博客
12-14 1237
写在之前： 注意： 1、setSize()和setLocation()、setBounds()的关系 查看源码 发现 setSize()和setLocation()其实都调用了setBounds()方法 所以只需要setBounds就可以同时设置大小及其坐标位置了 setSize()和setLocation()是单独对其大小或者坐标位置设定时才调用 ImageIcon放入Jlabel配合Jbutton 来按钮点击循环显示图片和隐藏图片 jb.addActionListener(new ActionL
详解DIV+CSS布局的好处和意义
12-13
如果单独使用 DIV 而不加任何 CSS, 那么它在网页中的效果和使用 <P></P> 是一样的。 DIV本身就是容器性质的,你不但可以内嵌table还可以内嵌文本和其它的HTML代码 CSS是CascADIng style Sheets的简称，中文译作...
用html和css布局如下图像,HTML CSS + DIV实现整体布局
weixin_39685459的博客
06-16 1882
什么是 HTML？HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言 (Hyper Text Markup Language)HTML 不是一种编程语言，而是一种标记语言 (markup language)标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页HTML 标签HTML 标记标签通常被称为 HTML 标签 (HTML tag)。HTML 标签是...
CSS之定位布局
qq_53977993的博客
10-25 578
本章主要介绍了CSS中定位的用法，有相对定位、绝对定位、固定定位和粘滞定位，希望对你有所帮助。
网页设计（二）——DIV+CSS布局1
初学者
07-11 1万+
前言：好久没更新过CSDN博客了，现在从原来的OI，变成了一个科研工作者。最近打算把原来的一些资料整理一下，作为经验公开分享，希望能帮到更多默默努力耕耘的人~ 网页设计系列源于早几年在学校网站工作做入门培训时的一些讲稿，有关HTML+CSS框架的编程，比较基础。当时为了给入门的同学更多感性认识，提供了很多小实例，这里也都给出来了。 DIV+CSS布局 DIV+CSS布局概念 DIV+CSS布局方式并不是一种新的语言或者体系，它就是html语言中的一部分。 简单来说就是把标签中的样式...
【HTML+CSS】4.CSS布局：盒模型和定位
M&Q的博客
04-14 1833
之前讲到，样式是CSS语法的最小单元，每一个样式都由选择器和声明（规则）两部分组成，而声明又由属性和属性值组成。上一篇讲了选择器，这里就开始进入“属性”部分了。 要想灵活应用CSS设计出美观且多样的页面，就需要熟悉CSS的各类“属性”，CSS中包含超过100种属性，包括字体属性、文本属性、边框属性、边距属性、布局属性、定位属性、打印属性等。作为初学者，我觉得我们应该循序渐进，先集中熟悉最常用...
瀑布布局，流式布局器（控件）第一版
08-11
NULL 博文链接：https://zha-zi.iteye.com/blog/2227000
Qt入门教程【Core篇】Layout布局（布局管理器、手动布局）
小鱼酱的博客
01-13 2万+
Qt常用布局剖析
5 创建布局器 &手动布局
小鑫的博客
01-09 186
布局管理器 Layout Manager 负责对子空间的布局，当窗口变化的时候，动态调节子控件的位置和大小 代码： import java.awt.Color; import java.awt.Component; import java.awt.Container; import java.awt.Dimension; import java.awt.LayoutManager; import java.awt.Rectangle; import javax.swing.JFrame; import j
java中图形界面的布局器解释
2301_76679920的博客
05-18 99
5>即便 使用 布局器 ，也可以 通过setPreferredSize，向布局器建议该组件显示的大小.// 即便 使用 布局器 ，也可以 通过setPreferredSize，向布局器建议该组件显示的大小。JButton b1 = new JButton("英雄1");JButton b1 = new JButton("英雄1");JButton b2 = new JButton("英雄2");JButton b3 = new JButton("英雄3");布局器：布局器是用在容器上的。
[QT_042]Qt学习之控件尺寸调整策略（QSizePolicy）
热门推荐
kongcheng253的博客
01-27 2万+
Qt学习之控件尺寸调整策略（QSizePolicy）
winform入门篇 第六章 -- 布局器
最新发布
weixin_43847546的博客
04-11 2151
SimpleLayoutPanel:自定义一个Panel，并自己实现-个LayoutEngine。观察代码。。自定义布局器的 使用步骤:1 工具I选项，Windows窗体设计器|常规自动填充工具箱:设为True2 添加自定义Panel或Control的类3生成解决方案 F74重新打开Form1.cs，在工具箱界面可以看到自己的控件直接拖动过来就可以使用将其他控件拖入到该布局器中，发现他按照一定的规则自动布局了可以给自定义panel添加一些间距属性运行。
Qt布局器常用方法（QHBoxLayout、QVBoxLayout、QGridLayout）
weixin_45948264的博客
08-22 2265
Qt布局器常用方法（QHBoxLayout、QVBoxLayout、QGridLayout）
5个有用的 CSS 布局生成器
qq_34703156的博客
08-16 3313
有效的布局不仅使你的网站具有吸引力，而且会使你的网站更加友好和吸引人。网站的布局清除了网页内导航的路径，并将网站最重要的元素放在前面和中间。包含很有用的网格，因为它们有助于布局设计。下面我们列出了一些有助于生成 CSS 布局工具的网站。 1、cssgr.id 地址 : https://cssgr.id/ 如果你是前端开发人员，这是一个非常有用的网站。你可以首先指定所需的行数和列数，或者在给定的选项中进行选择，然后为其生成代码。这使你可以专注于设计的其他方面而不是布局。 2、csslayout..
代码生成器之从MagicalCoder入门到精通
01-13
行走编程“”江湖“”，怎么不携带一个“”神器“”傍身MagicalCoder代码生成器，祝您一臂之力不会编程，又想自己动手diy一个网站或者应用，怎么办？MagicalCoder无代码开发平台带您进入无代码可视化网站DIY之路
CSS Grid布局教程详解与实战应用
CSS Grid是CSS的一个重要模块，旨在替代早期的布局技术如表格、浮动、定位和内联块元素，这些方法虽然在某些情况下可行，但存在局限性和hack性质。Grid布局提供了一种更为直观且功能全面的方式来组织网页内容，尤其...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值