CSS+div布局总结（快速入门，附代码）

最新推荐文章于 2024-05-06 20:22:13 发布
最新推荐文章于 2024-05-06 20:22:13 发布
阅读量5.8k 收藏 95
点赞数 8
分类专栏： 前端 css 文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/popofzk/article/details/107235896
版权

文章目录

定位

在这里插入图片描述

相对定位

以当前为参照物移动指定的距离
注意：相对定位，被定位的元素会占据原有的物理位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style>
        div{
            width:200px;
            height:200px;
        }
        #box1{
            background: red;
        }
        #box2{
            background:green;
            /*相对定位
                以当前为参照物移动指定的距离
                注意：相对定位，被定位的元素会占据原有的物理位置
            */
            position:relative;
            /*移动定位元素*/
            top:200px;/*bottom*/
            left:200px;/*right*/
        }
        #box3{
            background: blue;
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
</body>
</html>

绝对定位

  • 绝对定位的元素不会占据原有的物理位置

  • 以其他元素作为参考物移动指定距离的定位方式

    关于绝对定位的参考点：

    1. 如果元素的外层元素是非static（有了除默认值之外的定位设置）那么这个外层元素就成为该元素的定位参考点
    1. 如果元素的外层元素没有设置任何position的值，那么该元素将寻找距离自己最近的其他设定过position的外层元素作为参照物(必须为嵌套层)
    1. 如果该元素的外层元素没有任何一个元素采用position定位，那么此时定位参考元素变为body或者说页面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style>
        div{
            width:200px;
            height:200px;
        }
        #box1{
            background: red;
        }
        #box2{
            background:green;
            position: absolute; 
            /*top:200px;
            left:200px;*/
        }
        #box3{
            background: blue;
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
</body>
</html>

加上

top:200px;

left:200px;

参考点为(0,0)绝对左上角，而不是红色框左上角

如果外层元素没有定位，但是外外层（爷爷类）有定位，则有：

  • 如果元素的外层元素没有设置任何position的值，那么该元素将寻找距离自己最近的其他设定过position的外层元素作为参照物(必须为嵌套层)

子类参考点为外外层（爷爷类）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style>
        div{
            width:200px;
            height:200px;
        }
        #box1{
            background: red;
        }
        #box2{
            width:500px;
            height:500px;
            background:green;
            border:1px solid green;
            /*绝对定位：
                绝对定位的元素不会占据原有的物理位置
                以其他元素作为参考物移动指定距离的定位方式
                关于绝对定位的参考点：
                1.如果元素的外层元素是非static（有了除默认值之外的定位设置）那么这个外层元素就成为该元素的定位参考点
                2.如果元素的外层元素没有设置任何position的值，那么该元素将寻找距离自己最近的其他设定过position的外层元素作为参照物(必须为嵌套层)
                3.如果该元素的外层元素没有任何一个元素采用position定位，那么此时定位参考元素变为body或者说页面
            */
            /*position: absolute;*/
            /*top:200px;*/
            /*left:200px;*/
            position: relative;
        }
        #father{
            width:200px;
            height:200px;
            background: aquamarine;
            /*父类做一个定位*/
            /*position:relative;*/
            margin:20px;

        }
        #son{
            width:100px;
            height:100px;
            background:fuchsia;
            position:absolute;   /*son的参考点是father，但前提是father这一层（外层）必须有定位*/
            top:100px;
            left:100px;
        }
        #box3{
            background: blue;
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2">
        <div id="father">
            <div id="son"></div>
        </div>
    </div>
    <div id="box3"></div>
</body>
</html>

如果son的father没有定位，box2也没定位，则其absolute参考点为body：

固定定位

垂直滚动条：

background:palevioletred;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>
    <style>
        div{
            height:2000px;
            background:palevioletred;
        }
        #box{
            width:80px;
            height:400px;
            background: green;
            position: fixed;
            right:0px;  /*距离右边为0*/
            top:300px;  /*距离顶部为0*/
        }
    </style>
</head>
<body>
1
    <div>
        <div id="box"></div>
    </div>
2
</body>
</html>

堆叠顺序

注意：只能支持定位元素！！！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>z-index设置定位元素z轴的距离(定位元素的显示顺序)</title>
    <style>
        #one{
            width:200px;
            height:200px;
            background: red;
            position: absolute;
            top:100px;
            left:100px;
            z-index:1;
        }
        #two{
            width:200px;
            height:200px;
            background: yellow;
            position:absolute;
            top:150px;
            left:150px;
            z-index:999; /*这里设置1仍然是黄色盖住红色*/
        }
    </style>
</head>
<body>
    <!--注意：z-index属性只支持定位元素-->
    <div id="one"></div>
    <div id="two"></div>
</body>
</html>

首先看代码先后顺序，渲染的是one在前，two在后，所以黄色会盖住红色，z-index可以提高层级别

display

回顾浮动：任意元素一旦浮动，display都会失效

预备知识：

  • div:默认为块状元素：具有宽高属性，并且独占一行
  • Span:默认为行内元素：没有宽高属性，不会独占一行

块状&行内元素的互换：

    1. 如果将div设置为行内元素display: inline，则会使得div无宽高属性，且不会独占一行！
    1. 也可以将span设置为块状元素:display:block，则可以有宽高属性，独占一行！
    1. 如果用了很多块状元素div，但是会独占一行，如果不想独占一行（想并列显示），则要将其改为 行内块元素：display:inline-block——既有宽高属性 且不会独占一行，但涉及图文混排，故此方式用的较少，浮动使用较多

  • 接着将div的display改为表格属性display:table-cell,变为单元格形式，

隐藏元素：

  • display:none可以将div块进行隐藏，并且不会占用原物理空间（类似：visibility:hidden隐藏效果，但仍占用物理空间）
  • 如果元素是使用visibility设置的隐藏方式，那么只能用visibility：visible的方式来让元素显示;对应的，display:none要用display:block来显示！
  • 总结：visibility:设置元素是否显示
    visible 显示
    hidden隐藏
    注意：visibility和display:none的区别：visibility的隐藏方式仅隐藏了内容的显示，其占用的空间依旧占用，而display:none的隐藏方式是彻底隐藏该元素的内容和位置。
  • 应用：网页中鼠标未选中时隐藏，选中时显示 展开

在这里插入图片描述

设置透明度：

opacity: 0;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display</title>
    <style>
        div,span{
            width:200px;
            height:200px;
        }
        div{
            background: red;
            /*设置为行内元素*/
            /*display: inline;*/
            /*设置元素为行内块元素，具有宽高属性，并且不会独占一行*/
            /*display: inline-block;*/
            /*display: table-cell;*/
            /*隐藏元素*/
            /*display: none;*/
            /*display: block;*/
            /*隐藏元素，占据原有物理位置*/
            /*visibility: hidden;*/
            /*如果元素是使用visibility设置的隐藏方式，那么只能用visibility：visible的方式来让元素显示*/
            /*visibility:visible;*/
            /*
                visibility:设置元素是否显示
                    visible 显示
                    hidden隐藏
                   注意：visibility和display:none的区别：visibility的隐藏方式仅隐藏了内容的显示，其占用的空间依旧占用，而display:none的隐藏方式是
                   测地隐藏该元素的内容和位置。

            */
            /*设置元素透明度*/
            opacity: 0;
        }
        span{
            /*设置为块状元素*/
            /*display: block;*/
            background: fuchsia;
        }
    </style>
</head>
<body>
    <!--div:块状元素：具有宽高属性，并且独占一行-->
    <div>这是块状元素</div>
<!--    <div>这是块状元素</div>-->
<!--    <div>这是块状元素</div>-->
<!--    <div>这是块状元素</div>-->
<!--    <div>这是块状元素</div>-->
<!--    <div>这是块状元素</div>-->
<!--    <div>这是块状元素</div>-->
<!--    <div>这是块状元素</div>-->
<!--    <div>这是块状元素</div>-->
    <!--行内元素：没有宽高属性，不会独占一行-->
    <span>这是行内元素</span>
</body>
</html>

盒子模型

在这里插入图片描述

预备知识：

盒子与盒子之间的距离——margin：外间距

盒子内部的content与边框的间距——padding：内边距

边框也有一个厚度：border：边框

margin

在这里插入图片描述

快速设置：

margin:10px 10px 10px 10px顺序：上右下左

margin:20px 10px 20px上下20px，左右都为10px

margin:20px 10px上下20px，左右为10px

居中显示：

如果想要div居中，可以margin:10px auto;实现块状元素居中显示，如果改为浮动，则display失效,无法居中

外边距合并：

几个特点：

    1. 块级元素的垂直相邻外边距会合并
    1. 行内元素实际上不占上下外边距，行内元素的的左右外边距不合并
    1. 浮动元素的外边距也不会合并
    1. 允许指定负的外边距值，不过使用时要小心

取两者最大值，而非之和！

合并只有上下

子父类div：

在这里插入图片描述

margin负值：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        #box{
            width:620px;
            height:620px;
            background: pink;
        }
        #box>div:nth-child(1){
            width:600px;
            height:200px;
            background: blue;
            float:left;
        }
        #box>div:nth-child(2){
            width:200px;
            height:200px;
            background: yellow;
            float:left;
        }
        #box>div:nth-child(3){
            width:200px;
            height:200px;
            background: green;
            float:left;
            /*当前元素与其他元素之间的距离 外间距*/
            /*margin-top:10px;*/
            /*margin-bottom:10px;*/
            /*margin-left:10px;*/
            /*margin-right:10px;*/
            /*margin:10px 10px 10px 10px;*/
            /*margin:20px 10px 20px;*/
            /*margin:20px 10px;*/
            margin:10px;
        }
        #box>div:nth-child(4){
            width:200px;
            height:200px;
            background: aqua;
            float:left;
        }
        #box>div:nth-child(5){
            width:600px;
            height:200px;
            background: blueviolet;
            float:left;
        }
        #block{
            width:1200px;
            background: blue;
            height: 40px;
            /*实现让块状元素居中显示*/
            margin:10px auto;
        }
        #box1{
            margin-top: -100px;
            width:200px;
            background: red;
            height:200px;
            margin-bottom: 100px;
        }
        #box2{
            width:200px;
            background: yellow;
            height: 200px;
            margin-top:50px;
        }
        #father{
            width: 500px;
            height:200px;
            /*加一像素红色 实线边框*/
            border: 1px solid red;
            background: green;
        }
        #son{
            width:200px;
            height:100px;
            background: pink;
            margin-top:20px;
        }
    </style>
</head>
<body>
    <div id="box">
        <div>顶部元素</div>
        <div>左侧元素</div>
        <div id="self">当前元素</div>
        <div>右侧元素</div>
        <div>底部元素</div>
    </div>
    <!--可以设置块状元素居中-->
    <div id="block"></div>
    <!--外间距合并-->
    <div id="box1"></div>
    <div id="box2"></div>
    <!--包含式外间距合并-->
    <div id="father">
        <div id="son"></div>
    </div>
</body>
</html>

边框border

border: 5px solid red

每条边分开设置：

在这里插入图片描述

统一设置（大多数情况下）：

在这里插入图片描述

双线注意：

在这里插入图片描述

padding

在这里插入图片描述

总结：

padding的宽高要记录在盒子模型的宽高之内，于此相同的是border也要记录在盒子模型的宽高之内，但是margin并不算在宽高之内。所以在书写宽高时注意减掉内边距和边框(标准盒模型)

宽高指的是content的！回顾如图：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>padding</title>
    <style>
        span{
            border:1px solid red;
            float:left;
            /*padding-top:10px;*/
            /*padding-left:10px;*/
            /*padding-right:10px;*/
            /*padding-bottom: 10px;*/
            /*padding:10px;*/
            /*padding:10px 20px;*/
            /*padding: 10px 20px 15px;*/
            padding: 10px 20px 30px 40px;
        }
        div{
            width:150px;
            height:150px;
            background: red;
            clear: both;
            border:5px solid red;
            padding: 20px;
            /*margin:20px;*/
            /*
                padding的宽高要记录在盒子模型的宽高之内，于此相同的是border也要记录在盒子模型的宽高之内，但是margin并不算在宽高之内。所以各位在书写宽高时注意减掉内边距和边框(标准盒模型)
            */
        }
    </style>
</head>
<body>
    <span>这是内容</span>
    <div></div>
</body>
</html>

怪异盒模型：

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>怪异盒</title>
    <style>
        div{
            width:200px;
            height:200px;
            padding:20px;
            border:5px solid red;
            background: red;
            /*设置怪异盒*/
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

div+css布局注意事项

在这里插入图片描述

popofzk
关注
  • 8
    点赞
  • 踩
  • 95
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
div＋css div+css divcss布局入门教程 迅雷下载
09-16
Div+CSS布局入门教程 本教程旨在帮助读者掌握 Div+CSS 布局的基础知识，了解如何使用 HTML 结构化布局，使用 CSS 实现页面布局和样式定义。 知识点1：HTML 结构化布局 在网页制作中，通常我们先考虑设计，接着用 ...
Div+CSS 布局入门教程之二 构建网站
09-25
规划网站，本教程将以图示为例构建网站，需要的朋友可以参考下，其实多看一些你喜欢的网站布局，能学到很多东西。
DIV+CSS最常用的网页布局代码11例
icontent
11-08 2321
转自：DIV+CSS最常用的网页布局代码11例_CSS教程_100天网页设计网div css布局不同于table布局，它主要是按列来计算，而table是嵌套实现。这里列举了最常见的几种布局代码：单行一列CSS Code复制内容到剪贴板body{margin:0px;paddinhttps://www.pinlue.com/article/2019/03/2104/598296899335.html ...
DIV+CSS三种页面布局
weixin_65137412的博客
04-08 1256
【代码】DIV+CSS三种页面布局。
2024年前端最全常见 css 布局整理，从外包月薪5K到阿里月薪15K
最新发布
2401_84616339的博客
05-06 406
技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。资料过多，篇幅有限。
【HTML】使用记事本和浏览器搭建简单div框架
qq_51677275的博客
02-01 2741
提示：仅设置框架使用html的div标签固定网页布局，可以用于静态网页设计，也可用于asp.net网页开发的母版页来统一网页风格。提示：以下是本篇文章正文内容在实际使用时我们可以结合表格和asp.net的母版页进行风格统一，内容为个人学习分享，有问题欢迎指正。
div 页面框架布局
热门推荐
05-17 13万+
There is no nutrition in the blog content. After reading it, you will not only suffer from malnutrition, but also impotence.
网页设计（五）DIV+CSS布局规划
.正函数.的博客
01-15 2259
DIV+CSS布局是一种常用的网页设计技术，能够更好地实现页面结构和样式的分离。通过合理规划DIV块的布局，结合CSS样式设置，可以实现网页的自适应、响应式等效果，提升用户体验。
利用CSS+DIV进行网页布局
F2022697486的博客
03-25 1万+
网页布局是网页设计开发工作的重要组成部分，通过合理的网页布局能够实现网页页功能的精准定位，增强网页展示效果，使用户能够在较短的时间内找到目标元素。此外，合理的功能布局、图像搭配可以增强网页视觉表现力，给用户带来强烈的视觉感受，DIV+CSS布局技术可以让用户像编辑Word文档一样调整网页中的元素，同时还可以精准定位网页中的位置，不但降低了网页维护的难度，而且还提高了网页在服务器中的下载速率及其在网络中的传输速率。
html+css+js+div布局.zip
12-23
在这个项目中，CSS被用来创建一个div布局，这是一种常见的网页布局方法，通过div元素可以将网页划分为多个区域，然后分别对每个区域进行样式控制，实现灵活的页面设计。 JavaScript是网页的动态语言，用于添加交互...
【前端】前端必会的三种DIV+CSS布局
m0_64210833的博客
07-15 3042
要开发网页，必须要搞懂这三种div+css布局技术！（1）左右两列布局；（2）1行3列；（3）1行多列或多行多列布局；只要你掌握了这三种布局方式，那搭建一个完整的网页框架肯定是一点问题都没有。
DIV+CSS网页布局（新手必备)
Darlingmi的博客
04-20 3万+
文章目录一：网页布局的目的二：如何布局（1）：确定“版心”（2）：分析模块三：页面元素的定位机制（1）流式布局（2）浮动-float（3）绝对定位(position:absolute)(4)相对定位(position:relative)四：布局中的常用属性(1)浮动属性(float)(2)清除属性(clear)(3)溢出属性(overflow)五：元素的定位六：偏移量七：层叠属性八：语义标签九：命名规范 一：网页布局的目的 通过网页布局，可以使网页的内容更加清晰，有条理，同时更加易读。 二：如何布局 （1）
精通CSS+DIV网页样式与布局--CSS段落效果
从手指到键盘，谱出生命的轨迹~~~
12-30 5360
在上一篇博文中，小编主要详细的介绍了CSS是如何控制文字的显示效果，随着需求的不断变更，那么我们如何对段落进行相关操作，以达到我们想要的效果呢，接下来，为了需要，小编继续来完善CSS对段落的控制的显示效果。首先，我们来看一张导图：                   接下来，小编会随着上图所示的脉络，对CSS段落设置进行相关简单的介绍，首先我们来看CSS段落设置中的对齐效果：
div布局、table布局、flex布局、多列布局、网格布局 示例
ylnzzl的博客
04-20 3272
目录 基础代码 demo.html css/common.css div实用布局示例 代码 效果图 table布局 代码 效果图 flex布局 代码 效果图 多列布局 代码 效果图 网格布局 代码 效果图 基础代码 demo.html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv.
DIV＋CSS布局
zg0601的博客
10-17 1万+
DIV+CSS布局
div+css常见布局：两列布局、三列布局、圣杯布局和双飞翼布局
icemwj的博客
10-05 1万+
1、两列布局：左边固定，右边自适应 左右两侧，左侧固定宽度 200px，右侧自适应占满。 方法1： 左侧采用 float:left 往左浮动，右侧 margin-left:200px，留出左侧内容的空间 // html 代码 <div class="divBox"> <div class="left">左侧固定200px</div> <div class="right">右侧自适应</div> </div> // C
分享 10 个常见的 CSS 页面布局代码片段
前端达人
02-20 6763
大家好，本篇文章将分享我们业务中很常见的10个页面布局代码片段，这10 种页面布局很常见，实现方式也有很多种，本篇文章将用最简单的新方式进行实现，希望对大家有所启发。1、Card layo...
使用div+css布局制作电脑学堂页面
06-07
好的，下面是一个简单的电脑学堂页面布局，使用div和CSS实现： HTML代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>电脑学堂</title> <link rel="stylesheet" href="style.css"> </head> <body> <!-- 头部 --> <header> <div class="logo"> <h1>电脑学堂</h1> </div> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">课程</a></li> <li><a href="#">学员作品</a></li> <li><a href="#">关于我们</a></li> </ul> </nav> </header> <!-- 主体内容 --> <main> <!-- 侧边栏 --> <aside> <h2>热门课程</h2> <ul> <li><a href="#">HTML入门</a></li> <li><a href="#">CSS基础</a></li> <li><a href="#">JavaScript进阶</a></li> <li><a href="#">Vue框架</a></li> <li><a href="#">React框架</a></li> </ul> </aside> <!-- 内容区域 --> <section class="content"> <h2>最新课程</h2> <article> <h3>HTML5新特性</h3> <p>HTML5是HTML最新的修订版本。它新增了很多功能，包括语义化标签、多媒体元素、拖放API、Canvas绘图等。本课程将介绍HTML5的新特性，帮助您更好地掌握Web开发技术。</p> <a href="#">了解更多</a> </article> <article> <h3>CSS3动画</h3> <p>CSS3是CSS的最新版本，它新增了很多强大的功能，如渐变、阴影、动画等。本课程将介绍CSS3动画的实现原理和使用方法，帮助您创建更为出色的网页效果。</p> <a href="#">了解更多</a> </article> <article> <h3>JavaScript高级编程</h3> <p>JavaScript是一种高级的、动态的编程语言。本课程将介绍JavaScript的高级编程技术，包括闭包、原型、异步编程等。让您成为一名真正的JavaScript高手。</p> <a href="#">了解更多</a> </article> </section> </main> <!-- 底部 --> <footer> <p>电脑学堂 版权所有 © 2022</p> </footer> </body> </html> ``` CSS代码： ```css /* 全局样式 */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: Arial, sans-serif; font-size: 16px; line-height: 1.5; color: #333; } /* 头部样式 */ header { background-color: #f2f2f2; padding: 10px; display: flex; align-items: center; justify-content: space-between; } .logo h1 { font-size: 24px; } nav ul { list-style: none; display: flex; align-items: center; } nav li { margin-right: 20px; } nav a { color: #333; text-decoration: none; } nav a:hover { color: #666; } /* 主体内容样式 */ main { display: flex; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; padding: 20px; } aside { flex: 1; margin-right: 20px; } aside h2 { font-size: 20px; margin-bottom: 10px; } aside ul { list-style: none; } aside li { margin-bottom: 10px; } aside a { color: #333; text-decoration: none; } aside a:hover { color: #666; } .content { flex: 3; } .content h2 { font-size: 24px; margin-bottom: 20px; } .content article { margin-bottom: 20px; } .content article h3 { font-size: 20px; margin-bottom: 10px; } .content article p { margin-bottom: 10px; } .content article a { display: inline-block; padding: 5px 10px; background-color: #333; color: #fff; text-decoration: none; border-radius: 5px; } .content article a:hover { background-color: #666; } /* 底部样式 */ footer { background-color: #333; color: #fff; padding: 10px; text-align: center; } ``` 其中，头部使用flex布局，主体内容使用flex和flex-wrap布局实现，侧边栏和内容区域使用flex属性进行宽度的分配。整体布局简单明了，适合做电脑学堂官网的基础版。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值